echarts

 // 3 创建vue实例
    new Vue({
      // 元素
      el: '#app',
      // 数据
      data: {
        arr: [],
      },
      watch: {
        arr() {
          this.initEcharts()
        },
      },
      // dom渲染完毕执行一次
      mounted() {},
      methods: {
        getData() {
          // 模拟发请求
          setTimeout(() => {
            this.arr = [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ]
          }, 2000)
        },
        initEcharts() {
          const myChart = echarts.init(document.getElementById('main'))
          // 指定图表的配置项和数据
          const option = {
            title: {
              text: 'Referer of a Website',
              subtext: 'Fake Data',
              left: 'center',
            },
            tooltip: {
              trigger: 'item',
            },
            legend: {
              orient: 'vertical',
              left: 'left',
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: this.arr,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
            ],
          }

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option)
        },
      },
    })

    setTimeout(() => {})