echarts

<template>
    <div class="map">
        <div id="map" ref="chart1" style="width:777px;height:527px"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
// import jsonp from 'jsonp'
import 'echarts/map/js/china'// 引入中国地图

export default {
  data() {
    return {
      myChart: ''
    }
  },
  mounted() {
    this.demo()
  },
  //    methods:{

  //   init(){

  //   var option = {
  //       title:{
  //           text:'全国新增确诊/疑似趋势',
  //           left:'center',
  //           textStyle:{
  //               color:'#f00',
  //           }
  //       },
  //       tooltip:{

  //       },
  //       series:{

  //       }
  //   };

  //   }
  //    }
  methods: {
    demo() {
      // this.getData()
    // 基于准备好的dom，初始化echarts实例
    // this.myChart = echarts.init(document.getElementById('chart1')); //放在mounted中，初始化页面
      const myChart = echarts.init(document.getElementById('map'))
      const option = {
        title: {
          text: 'vue实现疫情地图',
          textStyle: {
            color: '#9c0505',
            fontWeight: 'bolder',
            fontSize: '25'
          },
          // left:'center',//居中
          left: 'center' // 居中
        },
        tooltip: {
          trigger: 'item', // 类型
          formatter: '地区:{b}<br/>确诊:{c}'// {a}系列名称,{b}地区名称,{c}合并数值
        },
        series: [
          {
            type: 'map',
            map: 'china', // 后边还可以写成省份
            //   data:[
            //        {name:'北京',value:200},
            //        {name:'湖北',value:20000},
            //        {name:'湖南',value:10000},
            //        {name:'河南',value:1200},
            //        {name:'浙江',value:8000},
            //     ],
            label: { // 显示省份名称的样式
              show: true,
              color: 'red',
              fontSize: 12
            //  backgroundColor:'yellow'
            },
            zoom: 1, // 地图缩放比例
            // itemStyle:{
            //   //   areaColor:'red',//地图区域的颜色
            //     borderColor:'blue'
            // },
            emphasis: { // 高亮状态下的设置
              label: { // 显示省份名称的样式
                color: '#fff',
                fontSize: 12
              },
              itemStyle: { // 地图区域多边形下的颜色
                areaColor: 'green'
              }
            }
          }
        ],
        visualMap: {
          type: 'piecewise', // 分段型
          show: true,
          pieces: [
            { min: 10000 }, // 不指定 max，表示 max 为无限大（Infinity）。
            { min: 1000, max: 9999 },
            { min: 100, max: 999 },
            { min: 10, max: 99 },
            { min: 1, max: 9 },
            { value: 0 } // 不指定 min，表示 min 为无限大（-Infinity）。
          ],
          inRange: {
          // color: ['#fff', '#ffaa85', '#660208'],
            color: ['red', 'red', 'red']
          },
          itemWidth: 10, // 设置方块的宽度
          itemHeight: 10
        }
      }
      // this.myChart = echarts.init(this.$refs.chart1) // 放在mounted中，初始化页面调用
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
    // 真实数据 https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522447
    //   jsonp('url',function(){})
    // getData() {
    //   jsonp('http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522447', (err, data) => {
    //     //    console.log(data.data.list)
    //     // map()js循环遍历的方法,forEach()是有返回值的,map()四没有返回值的
    //     var lists = data.data.list.map(item => {
    //       return { name: item.name, value: item.value }
    //     })
    //     console.log(lists)
    //     option.series[0].data = lists
    //     console.log(option.series[0].data)
    //     // 使用刚指定的配置项和数据显示图表。
    //     this.myChart.setOption(option) // 再次调用
    //   })
    // }

  }
}
</script>

<style>

</style>