记录首次使用 Echarts

 

  

这应该算是我首次使用 echarts 后的日记，虽然没有实现很好看的动画效果和复杂图表，但是对于我来说仍然是值得记录的。

具体步骤我也不一一说了，自己也是首次做，可能也会有错的，所以直接附上完整代码。 

<template>
  <div>
    <div class="echart" id="mychart" :style="myChartStyle"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      xData: [], //数据
      yData: [], //横坐标
      myChartStyle: {} //图表样式 这个不必参考我的
    }
  },
  props: {
    // 这是父组件传过来的数据
    cityName: {
      type: Array,
      default: true
    },
    cityCount: {
      type: Array,
      default: true
    }
  },
  mounted() {},
  methods: {
    initEcharts() {
      // 基本柱状图 我这边这个图表 X轴为展示数据 Y 轴为提示文字
      const option = {
        color: ['#1468EF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        // X 轴的数据
        xAxis: {
          type: 'value',
          data: this.cityCount
        },
        // Y 轴的数据 
        yAxis: {
          type: 'category',
          data: this.cityName,
          axisTick: {
            alignWithLabel: true
          },
        },
        grid: {
          left: '1%',
          right: '1.5%',
          bottom: '1%',
          top: '1%',
          containLabel: true
        },
        series: [
          {
            type: 'bar', //形状为柱状图
            data: this.cityCount,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
              color: '#000000'
            }
          }
        ]
      }
      
      const myChart = echarts.init(document.getElementById('mychart'))
      myChart.setOption(option)
      //随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

此时柱状图不出意外的话，展示出来了，但是当数据发生变化时，图表并不会发生变化，因此你需要在你获取数据的地方加上这一行代码。

 

// 这是上方代码的文件 在父组件的使用
<barEcharts ref="provinceChart" :cityName="cityName" :cityCount="cityCount"></barEcharts>

// 因为我是在父组件拿到数据返给子组件的，可以直接调动一下初始化图表的方法
this.$nextTick(() => {
    this.$refs.provinceChart.initEcharts()
})