又接到一个展示数据的活，看了下就是些柱状图，按照UI的要求绘制了一个简单的Demo
第一次用echarts绘制统计图，记录下
把图表展现出来：
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代码：
Echarts
JS代码，index.js部分：
// Generate datavar 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);}// optionvar 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);