数据格式
Data: {
"xAxisData": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "11", "12", "13", "14", "15", "16",
"17", "18", "19", "20", "21", "22", "23", "24"
],
"legendData": ["lengend1", "lengend2"],
"yName": "(℃)",
"xName": "时间",
"unit": "℃",
"data": [
[{
name: '你',
value: 10,
itemStyle: {
color: '#ff0'
}
}, {
name: '你',
value: 16,
itemStyle: {
color: '#ff0'
}
}, {
name: '你',
value: 20,
itemStyle: {
color: '#ff0'
}
}],
[{
name: '你',
value: 20,
itemStyle: {
color: '#ff0'
}
}, {
name: '你',
value: 20,
itemStyle: {
color: '#ff0'
}
}, {
name: '你',
value: 15,
itemStyle: {
color: '#ff0'
}
}]
]
}
function changeBarStyle(arr) {
for (var i = 0; i < arr.length; i++) {
var m = arr[0].length - 1;
var n = arr[1].length - 1;
arr[0][m].itemStyle.color = "#ffaf51";
arr[1][n].itemStyle.color = "#428bcb";
arr[0][i].itemStyle.color = "#ccc";
arr[1][i].itemStyle.color = "#ccc";
}
setEchartsAuto();
}
绘制柱状图
lineOption:正常的option
setLineOption:封装的方法(忽略),官网上的也可以使用
setEcharts('mychart', setLineOption(Data, function() {
lineOption.color = ['#ffaf51', '#428bcb'];
lineOption.grid.top = '25%';
lineOption.legend.itemHeight = 10;
lineOption.legend.itemWidth = 10;
lineOption.series[0].type = 'bar';
lineOption.series[1].type = 'bar';
lineOption.series[0].barWidth = 11;
lineOption.series[1].barWidth = 11;
lineOption.tooltip.formatter = function(params) {
var result='';
var name = params[0].name;
for(var i = 0;i<params.length;i++){
result = result+"<br>"+params[i].marker+" "+params[i].seriesName+":"+params[i].value+Data.unit;
}
result= name+result
return result
}
}));