echarts 柱状图之不同的值对应不同颜色的柱子

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)
        },