vue+echarts

<template>
  <div>
    <div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>
<script>
  import echarts from "echarts";
  //   import '../../node_modules/echarts/map/js/world.js'
  import '../../node_modules/echarts/map/js/china.js' // 引入中国地图数据
  export default {
    // name:"croList",
    name: "echarts",

    props: ["userJson"],
    data() {
      return {
        chart: null,
        croList:null
      };
    },
    mounted() {
      this.chinaConfigure();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
      this.croList=null;
    },
    methods: {
      // init() {
      //   const self = this;//因为箭头函数会改变this指向，指向windows。所以先把this保存
      //   setTimeout(() => {
      //     window.onresize = function() {
      //       self.chart = echarts.init(self.$refs.myEchart);
      //       self.chart.resize();
      //     }
      //   },20)
      // },
      created () {
        this.$http.get('apis/cordata')
          .then(response => {
            console.log(response.data.data)
            this.croList = response.data.data
            this.loading = false
            console.log(croList)
          }, error => {
            console.log('获取bloglist出错了.');
          });
      },

      chinaConfigure() {
        var croList=null;
        this.$http.get('apis/cordata')
          .then(response => {
            console.log(response.body.data)
            this.croList = response.body.data
            this.loading = false
            croList=this.croList
            console.log(croList)
            console.log(response.status)
          }, error => {
            console.log('获取bloglist出错了.');
          });
        console.log(croList)
        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
        window.onresize = myChart.resize;
        myChart.setOption({ // 进行相关配置
          // backgroundColor: "#02AFDB",
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ['High', 'Low'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'lightskyblue']
          },
          geo: { // 这个是重点配置区
            map: 'china', // 表示中国地图
            roam: true,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: croList
            }
          ]
        })
      }
    }
  }
</script>