echarts-柱状图绘制
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts-柱状图绘制相关的知识,希望对你有一定的参考价值。
又接到一个展示数据的活,看了下就是些柱状图,按照UI的要求绘制了一个简单的Demo
第一次用echarts绘制统计图,记录下
把图表展现出来:
<div id="bar" style="width: 500px;height: 500px;margin: 0 auto;"></div>
var myChart = echarts.init(document.getElementById(‘bar‘)); ar option = { backgroundColor: ‘#0f375f‘, series: [{ name: ‘bar‘, type: ‘bar‘, barWidth: 20 }], data:[‘1‘,‘2‘] } myChart.setOption(option);
按照要求,柱状是要有圆角的:
series: [{ name: ‘bar‘, type: ‘bar‘, barWidth: 20, itemStyle: { normal: { barBorderRadius: 5 }, data: barData }]
每个柱子上面是有数字显示的,而且数字是有千分位符号的:
series: [{ name: ‘bar‘, type: ‘bar‘, barWidth: 20, label: { normal: { show: true, position: ‘top‘, formatter: function(num){ return fMoney(num.value, 0); } } } data: barData }] //转换千分位 function fMoney (s, n) { n = n >= 0 && n <= 20 ? n : 2; //如果S为空返回0 if (!s) { return 0; } s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1]; var t = ""; for (var i = 0; i < l.length; i++) { t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : ""); } return t.split("").reverse().join(""); }
每个柱子的颜色都是不一样的,柱子的颜色是可以渐变的:
series: [{ name: ‘bar‘, type: ‘bar‘, barWidth: 20, itemStyle: { normal: { barBorderRadius: 5, color: function(params) { // build a color map as your need. var lightColor = new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: ‘#14c8d4‘},{offset: 1, color: ‘#43eec6‘}]); var colorList = [ lightColor,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘ ]; return colorList[params.dataIndex] } } }, data: barData }]
把代码整合一下,html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Echarts</title> <style type="text/css"> #bar { width: 500px; height: 500px; margin: 0 auto; } </style> </head> <body> <div id="bar"></div> <script src="http://cdn.bootcss.com/echarts/3.4.0/echarts.min.js"></script> <script src="./index.js"></script> </body> </html>
JS代码,index.js部分:
// Generate data var category = []; var dottedBase = +new Date(); var lineData = []; var barData = []; var myChart = echarts.init(document.getElementById(‘bar‘)); for (var i = 0; i < 5; i++) { var date = new Date(dottedBase + 3600 * 24); category.push([ date.getFullYear(), date.getMonth() + 1, date.getDate() ].join(‘-‘)); var b = (Math.random() * 20000).toFixed(0); var d = (Math.random() * 20000).toFixed(0); barData.push(b) lineData.push(d + b); } // option var option = { backgroundColor: ‘#0f375f‘, tooltip: { }, xAxis: { data: category, show: false, axisLine: { lineStyle: { color: ‘#ccc‘ } } }, yAxis: { splitLine: {show: false}, show: false, axisLine: { lineStyle: { color: ‘#ccc‘ } } }, series: [{ name: ‘bar‘, type: ‘bar‘, barWidth: 20, label: { normal: { show: true, position: ‘top‘, formatter: function(num){ return fMoney(num.value, 0); } } }, itemStyle: { normal: { barBorderRadius: 5, color: function(params) { // build a color map as your need. var lightColor = new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: ‘#14c8d4‘},{offset: 1, color: ‘#43eec6‘}]); var colorList = [ lightColor,‘#B5C334‘,‘#FCCE10‘,‘#E87C25‘,‘#27727B‘ ]; return colorList[params.dataIndex] } } }, data: barData }] }; function fMoney (s, n) { n = n >= 0 && n <= 20 ? n : 2; //如果S为空返回0 if (!s) { return 0; } s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + ""; var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1]; var t = ""; for (var i = 0; i < l.length; i++) { t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : ""); } return t.split("").reverse().join(""); } myChart.setOption(option);
以上是关于echarts-柱状图绘制的主要内容,如果未能解决你的问题,请参考以下文章