疫情地圖

<template>
  <div id="chart2" style="width: 600px;height:400px;"></div>
</template>

<script>
import echarts from "echarts"; //引入echarts
import jsonp from "jsonp";
import "echarts/map/js/china"; //引入中國(guó)地圖
let option = {
  title: {
    text: "疫情地圖", //圖表 標(biāo)題
    x: "center",
    textStyle: {
      color: "red"
    }
  },
  toolbox: {
    //工具欄
    feature: {
      saveAsImage: {} //保存圖片
    }
  },
  tooltip: {
    //提示信息
    trigger: "item", //類(lèi)型
    formatter: "地圖：<br/>確診：{c}"
  },
  series: [
    //數(shù)據(jù)
    {
      type: "map", //圖表類(lèi)型 是地圖
      map: "china", //中國(guó)地圖
      zoom: 1.2, //縮放比例
      roam: true,
      data: [],
      label: {
        //圖形上的文本標(biāo)簽，可用于說(shuō)明圖形的一些數(shù)據(jù)信息
        show: true,
        color: "#eee",
        fontSize: 10
      },
      emphasis: {
        //輸入表移入的顯示情況
        label: {
          //圖形上的文本標(biāo)簽，可用于說(shuō)明圖形的一些數(shù)據(jù)信息
          show: true,
          color: "#ffffff", //鼠標(biāo)移入文字顏色
          fontSize: 16
        },
        itemStyle: {
          show: true,
          areaColor: "#ccc" //鼠標(biāo)移入背景顏色
        }
      },
      itemStyle: {
        backgroundColor: "red",
        borderColor: "#eee",
        borderWidth: 1,
        borderType: "solid",
        areaColor: "#ccc"
      }
    }
  ],

  visualMap: {
    //視覺(jué)映射組件 --側(cè)邊柱子
    type: "piecewise", //piecewise 點(diǎn)狀視覺(jué)映射組件，continuous 直線狀視覺(jué)映射組件
    // min: 8, //最低多少
    // max: 500, //最高多少
    // text: ["High", "Low"], //高低處文本
    // realtime: true, // 拖拽時(shí)，是否實(shí)時(shí)更新
    // calculable: true, //是否顯示拖拽用的手柄（手柄能拖拽調(diào)整選中范圍）
    itemWidth: 10, //每個(gè)方塊的寬度
    itemHeight: 20, //每個(gè)方塊的高度
    inRange: {
      //范圍
      color: ["#d0ddec", "#42b983", "red"] //高中低處的顏色
    },
    pieces: [
      { min: 400 }, // 不指定 max，表示 max 為無(wú)限大（Infinity）。
      { min: 80, max: 300 },
      { min: 60, max: 79 },
      { min: 20, max: 59 },
      { min: 1, max: 19 },
      // { value: 123, label: "123（自定義特殊顏色）", color: "grey" },  // 表示 value 等于 123 的情況。
      { value: 0 }
    ]
  }
};

export default {
  mounted() {
    this.getData();
  },
  data() {
    return {
      url:
        "https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427"
    };
  },
  methods: {
    init() {
      var myChart = echarts.init(document.getElementById("chart2"));
      myChart.setOption(option);
    },
    getData() {
      var that = this;
      jsonp(that.url, (err, data) => {
        // jsonp 在請(qǐng)求創(chuàng)建script標(biāo)簽發(fā)送，不熟同源策略影響
        // console.log(data.data.list);
        let arr = data.data.list;
        let lists = arr.map(function(e) {
          return { name: e.name, value: e.value };
        });
        option.series[0].data = lists;
        that.init();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>