echarts画圆柱图pictorialBar

效果

源码

  data() {
    return {
      chartTitleFontSize: 0, // 图表标题文字大小
      chartInstance: null, // echart实例
      allData: null, // 服务器返回的数据
    }
  },
  computed: {
    titleStyle() {
      return {
        fontSize: `${this.chartTitleFontSize * 1.5}px`
      }
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    // 在页面加载完成的时候，主动进行屏幕的适配
    this.screenAdapter()
  },
  destroyed() {
    // 在组件销毁的时候需要把监听器取消掉，防止内存的泄露
    window.removeEventListener('resize', this.screenAdapter)
  },
methods:{
// 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.chart_ref)
      // 对图表初始化配置的控制
      const initOption = {
        color: ['#00fff5'],
        grid: {
          top: "25%",
          left: "5%",
          bottom: "5%",
          right: "5%",
          containLabel: true
        },
        animation: false,
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              interval: 0, // 坐标轴刻度标签的显示间隔
              color: '#739DC9',
              margin: 15, //刻度标签与轴线之间的距离。
              formatter: function (params) { // 处理目录名字换行方法
                var newParamsName = ''
                var paramsNameNumber = params.length
                var provideNumber = 4
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ''
                    var start = p * provideNumber
                    var end = start + provideNumber
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr
                  }
                } else {
                  newParamsName = params
                }
                return newParamsName
              },
            },

            axisLine: {
              show: false, //不显示x轴
            },
            axisTick: {
              show: false, //不显示刻度
            },
            boundaryGap: '6%',
            splitLine: {
              show: false,
              width: 0.08,
              lineStyle: {
                type: 'solid',
                color: '#03202E',
              },
            },
          },
        ],
        yAxis: [
          {
            show: false
          },
        ],
        series: [
          {
            name: "数据上椭圆",
            type: 'pictorialBar',
            colorBy: 'data',
            symbolOffset: [0, -6],
            symbolPosition: 'end',
            z: 12,
            label: {
              show: true,
              position: "top",
              fontSize: 14,
              color: 'inherit',
              formatter: function (params, index) {
                return params.value
              }
            },

          },
          {
            name: '下椭圆',
            type: 'pictorialBar',
            colorBy: 'data',
            symbolOffset: [0, 7],
            z: 12,

          },
          {
            name: '下实现线环',
            type: 'pictorialBar',
            colorBy: 'data',
            symbolOffset: [0, 9],
            z: 12,
            itemStyle: {
              color: 'transparent',
              borderColor: '#1eadcd',
              borderType: 'solid',
              borderWidth: 12
            },
          },
          {
            name: '下虚线环',
            type: 'pictorialBar',
            colorBy: 'data',
            symbolOffset: [0, 12],
            z: 12,
            itemStyle: {
              color: 'transparent',
              borderColor: '#1eadcd',
              borderType: 'dashed',
              borderWidth: 12
            },
          },
          {
            type: 'bar',
            barGap: '10%', // Make series be overlap
            barCateGoryGap: '10%',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                offset: 0,
                color: "rgba(22, 168, 194,.7)"
              },
              {
                offset: 1,
                color: "rgba(22, 168, 194,.3)"
              }
              ])
            }
          },
        ]
      }
      this.chartInstance.setOption(initOption)
    },
    // 获取服务器数据
    getData() {
      const data = [{
        name: '侨领数量',
        value: 460
      }, {
        name: '专业人员数量',
        value: 2824
      }]
      this.allData = data
      // 从大到小排序
      this.allData.sort((a, b) => {
        return b.value - a.value
      })
      this.updateChart()
    },
    // 更新图表
    updateChart() {
      const categoryName = this.allData.map((item) => { return item.name })
      const categoryValue = this.allData.map(item => { return item.value })
      const dataOption = {
        xAxis: [{
          data: categoryName
        }],
        series: [
          {
            type: 'pictorialBar',
            data: categoryValue,
          },
          {
            type: 'pictorialBar',
            data: categoryValue,
          },
          {
            type: 'pictorialBar',
            data: categoryValue,
          },
          {
            type: 'pictorialBar',
            data: categoryValue,
          },
          {
            type: 'bar',
            data: categoryValue,
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
     // 当浏览器大小发生变化的时候，会调用该方法来适配屏幕
    screenAdapter() {
      this.chartTitleFontSize = this.$refs.chart_title_ref.offsetWidth / 100 * 3.6
      // 和分辨率大小相关的配置项
      const adapterOption = {
        xAxis: [{
          axisLabel: {
            fontSize: this.chartTitleFontSize,
          }
        }],
        series: [
          {
            type: 'pictorialBar',
            symbolSize: [this.chartTitleFontSize * 2, 10],
          },
          {
            type: 'pictorialBar',
            symbolSize: [this.chartTitleFontSize * 2, 10],
          },
          {
            type: 'pictorialBar',
            symbolSize: [this.chartTitleFontSize * 3, 12],
          },
          {
            type: 'pictorialBar',
            symbolSize: [this.chartTitleFontSize * 5, 16],
          },
          {
            type: 'bar',
            barWidth: this.chartTitleFontSize * 2
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      // 需要手动调用图表对象的resize方法才能产生效果
      this.chartInstance.resize()
    }
}