VUE-Echarts渲染数据

<template>
  <div class="allStyle">
          <div id="reeInfo" class="echartStableshow"></div>
  </div>
</template>

<script>

export default {
    
    
  data () {
    
    
    return {
    
    
      reeInfo: {
    
    
        data: [],
        optionGroup: {
    
    
          tooltip: {
    
    
            trigger: 'axis',
            axisPointer: {
    
                // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
    
    
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
            height: 180
          },
          xAxis: [
            {
    
    

              type: 'category',
              data: ['美国', '日本', '英国', '意大利', '德国', '印度', '俄罗斯', '缅甸', '韩国', '尼泊尔'],
              axisTick: {
    
    
                alignWithLabel: true
              },
              axisLabel: {
    
    
                interval: 0,
                rotate: 40,
                fontsize: 6
              }
            }
          ],
          yAxis: [
            {
    
    
              type: 'value'
            }
          ],
          series: [
            {
    
    
              name: '直接访问',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
    
    
                normal: {
    
    
                  color: 'red'
                }
              },
              label: {
    
    
                normal: {
    
    
                  color: '#D7000F',
                  show: true,
                  distance: -20,
                  position: 'insideTop'
                }
              },
              data: [12, 21, 3, 13, 9, 46, 17, 32, 25, 8]
            }
          ]
        },
      },
    };
  },
  methods: {
    
    
    init: async function () {
    
    
      this.initChartData();
    },
    initChartData () {
    
    
      this.setOption();
    },
    setOption () {
    
    
      this.drawChart();
    },
    /**
     * 绘制图表
     */
    drawChart () {
    
    
      let reeInfo = this.$echarts.init(document.getElementById('reeInfo'));
      reeInfo.setOption(this.reeInfo.optionGroup);
      window.addEventListener('resize', () => {
    
    
        reeInfo.resize();
      });
    },
    renderEcharts () {
    
    
      this.$myHttp({
    
    
        method: 'POST',
        url: this.prefix + '/microarch/hgry/flightInfo/getCountryCount',
        params: {
    
    }
      }).then(res => {
    
    
        let data = res.data;
        for (let item in data) {
    
    
          let target = {
    
    };
          target.tablename = item;
          target.count = data[item];
          this.tableData1.push(target);
        }
        // 开始渲染数据 后续需要封装函数
        let length = this.tableData1.length;
        this.xData = new Array(10);
        this.yData = new Array(10);
        for (let i = 0; i < 10; i++) {
    
    
          this.xData[i] = this.tableData1[i].tablename;
          this.yData[i] = this.tableData1[i].count;
        }
        this.reeInfo.optionGroup.xAxis[0].data = this.xData;
        this.reeInfo.optionGroup.series[0].data = this.yData;
        // 更新数据之后需要重新渲染
        this.init();
        // 渲染数据结束
      });

    },
  },
  mounted () {
    
    
    this.$nextTick(() => {
    
    
      this.init();
    });
  },
  created () {
    
    
  }
};
</script>

<style lang="scss" scoped>


.allStyle {
    
    
        .echartStableshow {
    
    
          margin-top: -10px;
          width: auto;
          height: 220px;
          background: #FFFFFF;
        }
  }
</style>