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);
