How to use jQuery plug-in Echarts to realize gradient histogram
Today Xiaobian to share with you how to use the jQuery plug-in Echarts to achieve the gradient histogram of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.
Effect picture:
The code is as follows:
ECharts histogram var dom = document.getElementById ("container"); var myChart = echarts.init (dom); option = null; var xAxisData = []; var data = []; for (var I = 20; I < 29; iSum +) {xAxisData.push ('2' +'/'+ I); data.push (Math.round (Math.random () * 500) + 200) } / / initial option option = {title: {text: 'daily turnover (ten thousand yuan)'}, tooltip: {trigger: 'axis', borderColor:' # 636F7F, borderWidth: 1, backgroundColor: 'rgba', textStyle: {color:'# ffffff' / / fontWeight: 'bold', fontSize: 14,}, transitionDuration: 0.6, formatter:' {b0} {c0} (ten thousand yuan)', axisPointer: {type: 'line', lineStyle: {color:' # 05F41E, width: 1 Type: 'solid',},}, / / axisPointer: {/ / axis indicator Axis trigger valid / / type: 'shadow', / / defaults to straight line Optional: 'line' |' shadow' / / shadowStyle: {/ / color:'# D6EAFAQ, / / opacity: 0.5, / /} / /},}, calculable: true, xAxis: {data: xAxisData.map (function (x) {return x) }), axisLabel: {textStyle: {color:'# 333 top', align: 'center', baseline:' top'}, rotate: 20, margin: 15,},} YAxis: {/ / horizontal marking defaults to TRUE splitLine: {show: true,}, axisLabel: {textStyle: {color:'# 333'}}, type: 'value', boundaryGap: false / / Type of separator splitLine: {show: true, lineStyle: {color:'# EFF0F0', type: 'dashed',}, series: {type:' bar', data: data, barWidth: 15 ItemStyle: {normal: {barBorderRadius: 20, color: new echarts.graphic.LinearGradient (0,0,0,1, [{offset: 0, color:'# 37BBF8'}, {offset: 1, color:'# 2294E4'}]) / / shadowColor: 'rgba, / / shadowBlur: 20, areaStyle: {type:' default'},} If (option & & typeof option = "object") {myChart.setOption (option, true);} these are all the contents of this article entitled "how to use the jQuery plug-in Echarts to implement a gradient histogram". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
