这篇文章给大家分享的是有关jQuery插件Echarts怎么实现的渐变色柱状图的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
效果图:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图</title> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="container" ></div> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); option = null; var xAxisData = []; var data = []; for (var i = 20; i < 29; i++) { xAxisData.push('2' +'/'+ i); data.push(Math.round(Math.random() * 500) + 200); } // 初始 option option = { title: { text: '每日成交额(万元)' }, tooltip: { trigger: 'axis', borderColor: '#636F7F', borderWidth : 1, backgroundColor : 'rgba(99,111,127,1)', textStyle:{ color : '#ffffff', // fontWeight : 'bold', fontSize : 14, }, transitionDuration : 0.6, formatter: '{b0}<br />{c0}(万元)', axisPointer :{ type : 'line', lineStyle : { color : '#05F41E', width : 1, type : 'solid', }, }, // axisPointer : { // 坐标轴指示器,坐标轴触发有效 // type : 'shadow', // 默认为直线,可选为:'line' | 'shadow' // shadowStyle :{ // color : '#D6EAFA', // opacity : 0.5, // } // }, }, calculable : true, xAxis: { data: xAxisData.map(function(x){ return x; }), axisLabel: { textStyle: { color: '#333', align : 'center', baseline : 'top' }, rotate : 20, margin : 15, }, }, yAxis: { // 横向标线 默认为TRUE splitLine: { show: true, }, axisLabel: { textStyle: { color: '#333' } }, type : 'value', boundaryGap : false, // 分隔线线的类型 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(35,149,229,0.8)', // shadowBlur: 20, areaStyle: {type: 'default'} } } }, }; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>
感谢各位的阅读!关于“jQuery插件Echarts怎么实现的渐变色柱状图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。