echats 根据数组中的值配置不同的颜色

直接上代码:

series: [
	           {
       				    data: this.dapartValue,
                        type: 'bar',
                        //柱状图上显示数值
                        label: {
                            normal: {
                                show: true, //开启显示
                                position: 'top', //柱形上方
                                textStyle: {
                                    //数值样式
                                    color: '#fff',
                                },
                            },
                        },
                        name: this.typeName,
                        showBackground: false, //阴影是否去除
                        itemStyle: {
                            color: function (params) {
                            //根据数组中的值显示不同的颜色(color里面可以写回调函数)
                                if (params.data < 0) {
                                    var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#F51B12' },
                                        { offset: 0.7, color: '#F51B12' },
                                        { offset: 1, color: '#F51B12' },
                                    ]);
                                } else {
                                    var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#188df0' },
                                        { offset: 0.7, color: '#188df0' },
                                        { offset: 1, color: '#188df0' },
                                    ]);
                                }
                                return color;
                            },
                        },
                    },
]

你可能感兴趣的:(javaScript,前端,angular.js,javascript)