柱形图渐变

2023-05-15  本文已影响0人  小北呀_
image.png

柱形图标签设置百分比,前提加一个setTimeout

 mounted() {
    setTimeout(() => {
      this.getchart()
    }, 0)
  },

代码


 getchart() {
      const myChart = this.$echarts.init(document.getElementById('myChart_1'))
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        color: [
          {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#4FACFE' },
              { offset: 1, color: '#00F2FE' }
            ]
          }
        ],
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            }

          }
        ]
      }
      myChart.setOption(option)
    }

上一篇 下一篇

猜你喜欢

热点阅读