vue使用echarts画柱状图(个性化样式)

根据ui设计实现的个性化柱状图，个人第一次弄，所以记录一下，如果你也刚好需要使用，可以借鉴一下：效果图如下

我相信你在使用的时候应该已经在项目可以正常使用echarts，所以就不必过多其他步骤，直接上代码

let option = {
        backgroundColor: 'rgba(0,0,0,0)',
        grid: {
          top: '10%',
          left: '1%',
          right: '1%',
          bottom: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
            left: 'right',
            icon: 'circle',
            itemHeight: 10,
            itemWidth: 10,
            textStyle: {
                color: '#fff',
                padding: [3,0,0,0]
            }
        },
        xAxis: {
          type: "category",
          data: this.xAxisData,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
                color: "#8BACFF",
                width:0.5,
                opacity:0.2
              },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff',
              
            },
            },
        },
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#8BACFF",
                width:0.5,
                opacity:0.2
              },
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: 14,
              },
            },
          },
        ],
         series: [ // 数据1,3,5 表示阴影部分,2,4,6表示展示数据
          {
            tooltip: {
              show: false,  //阴影部分不需要展示设置为不显示
            },
            z: 4, //设置层级,阴影部分的层级不能比在作用上的数据层级高
            type: "pictorialBar", //必须设置为这个属性
            symbolSize: ["16", "6"],
            symbolRepeat: "fixed",
            symbol: "image://" + img4, // 阴影小块是一个个的图片,所以这个地方是设置图片路径,img4为设置图片的具体地址
            symbolMargin: '4',
            symbolOffset: [-20, 0],// 这个设置位置,因为我设置的图片大小为18像素,而且每个有三个柱状图,所以第一个设施的位置为-20.
            data: [value,value,value,value] 
          },
          { // 这个为需要展示的数据
            name: '设备总数',
            z: 5, //比阴影层级高
            type: "pictorialBar",
            symbolSize: ["16", "6"],
            animation: true,
            symbolRepeat: "fixed",
            symbolClip: true,
            symbolPosition: "start",
            symbolOffset: [-20, 0],//跟阴影部分设置位置要一样才显示出效果
            symbol: "image://" + img1,
            symbolMargin: '4',
            itemStyle: {
                normal: {
                    color: '#008FFF', 
                }
            },
            data: [5,12,8,17]
          },
          {
            tooltip: {
              show: false,
            },
            z: 4,
            type: "pictorialBar",
            symbolSize: ["16", "6"],
            symbolRepeat: "fixed",
            symbol: "image://" + img4,
            symbolMargin: '4',
            symbolOffset: [0, 0],
            data: [value,value,value,value]
          },
          {
            name: '维修数量',
            z: 6,
            type: "pictorialBar",
            symbolSize: ["16", "6"],
            animation: true,
            symbolRepeat: "fixed",
            symbolClip: true,
            symbolPosition: "start",
            symbolOffset: [0, 0],
            symbol: "image://" + img2,
            symbolMargin: '4',
            itemStyle: {
                normal: {
                    color: '#4EEED8', 
                }
            },
            data: [18,5,19,4]
          },
          {
            tooltip: {
              show: false,
            },
            z: 4,
            type: "pictorialBar",
            symbolSize: ["16", "6"],
            symbolRepeat: "fixed",
            symbol: "image://" + img4,
            symbolMargin: '4',
            symbolOffset: [20, 0],
            data: [value,value,value,value]
          },
          {
            name: '停用数量',
            z: 6,
            type: "pictorialBar",
            symbolSize: ["16", "6"],
            animation: true,
            symbolRepeat: "fixed",
            symbolClip: true,
            symbolPosition: "start",
            symbolOffset: [20, 0],
            symbol: "image://" + img3,
            symbolMargin: '4',
            itemStyle: {
                normal: {
                    color: '#2F50F8', 
                }
            },
            data: [4,19,17,4]
          },
        ],
      }

 其实实现个性化主要在series数据里面,可以根据里面注解大概了解一下具体原理.