echarts 柱状图
我们通常获取的数据都需要进行分类,以及数据的高低呈现出不同的状态。
早日常生活中最直观的就是对颜色的区分来达到我们想要的效果。
这是一个横向的柱状图。
实现不同数值对应不同的颜色。
代码如下:
在定义option之前定义一个 颜色的集合方便下边的调用。
let colorList = ['#FF0000', '#FDC41F', '#B8DCFE'];
series属性的写法
series: [
{
name: '2011', //柱子的名称
type: 'bar', // 柱子
barWidth: 10, //柱宽
data: [90, 100 , 120], // 数据 下边的比较
showBackground: true, // 是否展示背景
itemStyle: { // 这一块是本话题的主要内容,没啥解释的自己粘贴就可以
color: (param) => {
let num = param.data;
if (num > 110) {
return colorList[0];
}else if(num > 80){
return colorList[1];
}
return colorList[2];
}
}
}
]
完成的一个方法,仅供参考!
methods_name(){
var chartDom = document.getElementById('your id');
var myChart = echarts.init(chartDom);
var option;
let self = this;
let colorList = ['#FF0000', '#FDC41F', '#B8DCFE'];
option = {
title: {
show: false
},
tooltip: {
show: false,
},
legend: {
show: false
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
show: false,
type: 'value'
},
yAxis: {
type: 'category',
show: false
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 10,
data: self.chart_ele_data, // 换成你自己的数据
showBackground: true,
itemStyle: {
color: (param) => {
let num = param.data;
if (num > 110) {
return colorList[0];
}else if(num > 80){
return colorList[1];
}
return colorList[2];
}
}
}
]
};
myChart.setOption(option)
},