echarts颜色处理

颜色渐变处理

          let option = {
                    grid: {
                        top:'6%',
                        left: '4%',
                        right: '8%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        show: true,
                        position: 'bottom',
                        axisTick: {
                            show: true
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000000',
                            }
                        },
                        splitLine: {
                            show: false
                        },
                    },
                    yAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false,
                            alignWithLabel: true,
                            length: 5,
                        },
                        splitLine: { //网格线
                            "show": false
                        },
                        inverse: 'true', //排序
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000000',
                            }
                        },
                        data: ['鼓楼区', '江宁区', '秦淮区', '栖霞区', '建邺区']
                    }

                    ],
                    series: [{
                        name: '重点单位场所',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}',
                                textStyle: {
                                    color: '#000000' //color of value
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                barBorderColor:'#ffc002',//背景透明，以及边框设置；
                                color:  new self.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: "#1D85F0" // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#5EB1FF" // 100% 处的颜色
                                }], false),
                                barBorderRadius: [0,4,4,0],
                                borderWidth: 0,
                                borderColor: '#333',
                            }
                        },
                        barGap: '0%',
                        barCategoryGap: '50%',
                        data: [8, 5, 4, 2, 1, 1],
                    }
                    ]
                };

 

 

 饼图颜色适配

          let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a}<br/>{b}:{c}({d}%)'
                    },
                    color: ['#C880FF', '#FF8484', '#74C9FF','#747BFF','#FFE074'],
             /*       legend: {
                        // orient: 'vertical',
                        top: 20,
                        left: 'center',
                        data: this.todyworkData.lend
                    },*/
                    series: [{
                        data: [{value: 3, name: '火灾'},
                            {value: 1, name: '救援'},
                            {value: 2, name: '其它'},
                            {value: 1, name: '救助'},
                            {value: 0, name: '反恐'}],
                        type: 'pie',
                        name: '占比情况',
                        radius: '70%',
                        center: ['50%', '50%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    // position: 'inner',
                                    // formatter: '{b}:{c}({d}%)',
                                    formatter: '{b}{d}%',
                                    // position: 'inside',
                                    textStyle: {
                                        color: '#656565'
                                    }
                                },
                                labelLine: { show: true },
                            }
                        }
                    }]
                };

 

 

 柱状图不同颜色并渐变

    export default {
        name: "policeType",
        data(){
            return{
                EchartData:{
                    sData:[],
                    yData:[],
                },
                colorArray:[{
                    top: '#ffa800', //黄
                    bottom: 'rgba(11,42,84, 0.3)'
                }, {
                    top: '#1ace4a', //绿
                    bottom: 'rgba(11,42,84, 0.3)'
                },
                    {
                        top: '#4bf3ff', //蓝
                        bottom: 'rgba(11,42,84,0.3)'
                    }, {
                        top: '#4f9aff', //深蓝
                        bottom: 'rgba(11,42,84,0.3)'
                    },
                    {
                        top: '#A25AF3', //粉
                        bottom: 'rgba(11,42,84,0.3)'
                    },
                    {
                        top: '#E65AF3', //粉
                        bottom: 'rgba(11,42,84,0.3)'
                    }
                ]
            }
        },
    }

 

series: [{
                        name: '重点单位场所',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{c}',
                                textStyle: {
                                    color: 'white' //color of value
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                barBorderColor:'#ffc002',//背景透明，以及边框设置；
                                color: function (params) {
                                    let num = _this.colorArray.length;
                                    return {
                                        type: 'linear',
                                        colorStops: [{
                                            offset: 0,
                                            color: _this.colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: _this.colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: _this.colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: _this.colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: _this.colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: _this.colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: _this.colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: _this.colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: _this.colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: _this.colorArray[params.dataIndex % num].top
                                        }, {
                                            offset: 0,
                                            color: _this.colorArray[params.dataIndex % num].bottom
                                        }, {
                                            offset: 1,
                                            color: _this.colorArray[params.dataIndex % num].top
                                        }],
                                        globalCoord: false
                                    }
                                },
                                barBorderRadius: 70,
                                borderWidth: 0,
                                borderColor: '#333',
                            }
                        },
                        barGap: '0%',
                        barCategoryGap: '50%',
                        // data: [10, 52, 200, 334, 390, 330, 220],
                        data: this.EchartData.sData,
                    }

 

 不同颜色并渐变第二种方式

      series: [{
                        // data: [120, 200, 150, 80, 70, 110, 130],
                        data: this.EchartData.sData,
                        type: 'bar',
                        barWidth: 16,
                        barGap: '0%',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList=[{
                                        top: '#FFE083',
                                        bottom: '#EAA63C'
                                    },
                                        {
                                            top: '#C0F8FF',
                                            bottom: '#75DDEA'
                                        }, {
                                            top: '#AECDFF',
                                            bottom: '#5D95F0'
                                        },
                                        {
                                            top: '#BE88FF',
                                            bottom: '#9756E5'
                                        },
                                        {
                                            top: '#FFB7FE',
                                            bottom: '#EF59ED'
                                        },
                                        {
                                            top: '#FFAEAE',
                                            bottom: '#FF8D8D'
                                        },
                                        {
                                            top: '#FFFCAC',
                                            bottom: '#FFF95F'
                                        },
                                    ]
                                    let num=colorList.length
                                    return  new _this.$echarts.graphic.LinearGradient(0,0,0,1, [{
                                        offset: 0,
                                        color: colorList[params.dataIndex % num].bottom
                                    }, {
                                        offset: 1,
                                        color: colorList[params.dataIndex % num].top
                                    }, {
                                        offset: 0,
                                        color: colorList[params.dataIndex % num].bottom
                                    }, {
                                        offset: 1,
                                        color: colorList[params.dataIndex % num].top
                                    }, {
                                        offset: 0,
                                        color: colorList[params.dataIndex % num].bottom
                                    }, {
                                        offset: 1,
                                        color: colorList[params.dataIndex % num].top
                                    }, {
                                        offset: 0,
                                        color: colorList[params.dataIndex % num].bottom
                                    }, {
                                        offset: 1,
                                        color: colorList[params.dataIndex % num].top
                                    }, {
                                        offset: 0,
                                        color: colorList[params.dataIndex % num].bottom
                                    }, {
                                        offset: 1,
                                        color: colorList[params.dataIndex % num].top
                                    }, {
                                        offset: 0,
                                        color: colorList[params.dataIndex % num].bottom
                                    }, {
                                        offset: 1,
                                        color: colorList[params.dataIndex % num].top
                                    }],false)
                                },
                            /*    label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{b}\n{c}'
                                }*/
                            },

                        },
                        label: {
                            show: true,
                            position: 'top',
                            color:'#ffffff'
                        },
                    }],