echarts 柱状图多种样式设置

柱状图结果：

代码：

  1 option = {
  2     grid: {
  3         left: '10%' ,
  4         right: 65,
  5         top: 114,
  6         bottom: 100,
  7     },
  8     xAxis: [{
  9         type: 'category',
 10         //横向网格
 11         splitLine: {
 12             show: true,
 13             lineStyle: {
 14                 color: '#e1e1e1',
 15             }
 16         },
 17         axisTick: {
 18             show: false
 19         },
 20         //是否显示x轴线
 21         axisLine: {
 22             show: false,
 23             // lineStyle: {
 24             //     color: '#2A2A2A',
 25             // }
 26         },
 27         //x轴字体设置
 28         axisLabel: {
 29             rotate: 0,
 30             show: true,
 31             textStyle: {
 32                 fontSize: 22,
 33                 fontFamily: 'PingFang-SC-Medium',
 34                 // padding: [5,0,0,0],
 35                 color: '#000000'
 36             },
 37         },
 38         data: ['A区', 'B区', 'C区', 'D区', 'E区', "F区"],
 39 
 40     }],
 41     yAxis: [{
 42         type: 'value',
 43         splitLine: {
 44             show: true,
 45             lineStyle: {
 46                 color: '#e1e1e1',
 47             }
 48         },
 49         axisTick: {
 50             show: false
 51         },
 52         axisLine: {
 53             show: false,
 54             // lineStyle: {
 55             //     color: '#2A2A2A',
 56             // }
 57         },
 58         axisLabel: {
 59             show: true,
 60             textStyle: {
 61                 fontSize: 22,
 62                 fontFamily: 'PingFang-SC-Medium',
 63                 color: '#838383'
 64             }
 65         }
 66     }],
 67     series: [{
 68         type: 'bar',
 69         data: [145, 159, 6, 145, 149, 50],
 70         barWidth: 25, //柱子的宽度
 71         silent: true,
 72         itemStyle: {
 73             normal: {
 74                 color: function(params) {
 75                     //设置默认某一行颜色以及点击之后颜色变化，颜色均为渐变色
 76                     if (params.name === "B区" ) {
 77                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
 78                                 offset: 0,
 79                                 color: "#f99b37" // 0% 处的颜色
 80                             },
 81                             {
 82                                 offset: 1,
 83                                 color: "#ffbb51" // 100% 处的颜色
 84                             }
 85                         ], false)
 86                     } else {
 87                         return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
 88                                 offset: 0,
 89                                 color: "#1a79c9" // 0% 处的颜色
 90                             },
 91                             {
 92                                 offset: 1,
 93                                 color: "#46aafd" // 100% 处的颜色
 94                             }
 95                         ], false)
 96                     }
 97 
 98                 },
 99                 label: {
100                     show: true,
101                     position: 'top',
102                     // formatter: '{b}
{c}'
103                     formatter: function(a) {
104                         if (a.name == "B区") {
105                             return a.value + '%'
106                         } else {
107                             return a.value + '%'
108                         }
109                     }
110                 },
111             },
112 
113         },
114     }]
115 };

若在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);
}