echarts 柱状图多种样式设置

柱状图结果：

代码：

option = {
    grid: {
        left: '10%' ,
        right: 65,
        top: 114,
        bottom: 100,
    },
    xAxis: [{
        type: 'category',
        //横向网格
        splitLine: {
            show: true,
            lineStyle: {
                color: '#e1e1e1',
            }
        },
        axisTick: {
            show: false
        },
        //是否显示x轴线
        axisLine: {
            show: false,
            // lineStyle: {
            //     color: '#2A2A2A',
            // }
        },
        //x轴字体设置
        axisLabel: {
            rotate: 0,
            show: true,
            textStyle: {
                fontSize: 22,
                fontFamily: 'PingFang-SC-Medium',
                // padding: [5,0,0,0],
                color: '#000000'
            },
        },
        data: ['A区', 'B区', 'C区', 'D区', 'E区', "F区"],

    }],
    yAxis: [{
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                color: '#e1e1e1',
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            // lineStyle: {
            //     color: '#2A2A2A',
            // }
        },
        axisLabel: {
            show: true,
            textStyle: {
                fontSize: 22,
                fontFamily: 'PingFang-SC-Medium',
                color: '#838383'
            }
        }
    }],
    series: [{
        type: 'bar',
        data: [145, 159, 6, 145, 149, 50],
        barWidth: 25, //柱子的宽度
        silent: true,
        itemStyle: {
            normal: {
                color: function(params) {
                    //设置默认某一行颜色以及点击之后颜色变化，颜色均为渐变色
                    if (params.name === "B区" ) {
                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#f99b37" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#ffbb51" // 100% 处的颜色
                            }
                        ], false)
                    } else {
                        return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#1a79c9" // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: "#46aafd" // 100% 处的颜色
                            }
                        ], false)
                    }

                },
                label: {
                    show: true,
                    position: 'top',
                    // formatter: '{b}
{c}'
                    formatter: function(a) {
                        if (a.name == "B区") {
                            return a.value + '%'
                        } else {
                            return a.value + '%'
                        }
                    }
                },
            },

        },
    }]
};

 若在vue项目中使用，则进行封装，其中dataChart为绘图的柱状图数据

 export const barChart = (id,dataChart) =>{
　　let option = {};
    const client = document.getElementById(id);
     let myChart = echarts.init(client);
    const clientWidth = client.clientWidth;
    const clientHeight = client.clientHeight;
    myChart.clear();
    myChart.resize({ clientWidth, height: clientHeight});
    myChart.setOption(option);
}