vue echart柱状图

<template>
  <div id="mychart" class="echart" style="padding: 0px;" :style="{ width: width, height: height }" />
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      xData: ['遍数', '温度', '速度', '压实度'], // 横坐标
      yData: [31.23, 80.42, 99.45, 100] // 数据
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            type: 'bar', // 形状为柱状图
            data: this.yData,
            barWidth: 50,
            itemStyle: {
              normal: {
                // 每根柱子颜色设置
                color: function(params) {
                  const colorList = [
                    '#28D1F4',
                    '#28BA77',
                    '#288DC9',
                    '#F49D3F'
                  ]
                  return colorList[params.dataIndex]
                }
              }
            }

          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }, // 鼠标移上的阴影，默认是线
          formatter: function(params) {
            console.log(params.color)
            return "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + params[0].color + ";'></span> " + params[0].name + ': ' + params[0].value + '次'
          }
        }
      }
      const myChart = echarts.init(document.getElementById('mychart'))
      myChart.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>