移动开发【6】 Vue地图（echarts）

新建工程

• 新建工程：vue create project-name
  • 自选配置：一般自选Manually select features，即手动选择配置
  • 后续的配置选完之后，等待一会
  • 安装完成后npm run serve启动查看

安装echarts

• 安装echarts:npm install echarts --save
  

安装vue-resource（如果没有）

• 安装vue-resource，用于获取数据：npm install vue-resource
  

安装jsonp

• 安装jsonp：npm install jsonp --save
  

地图准备

• 配置好路由开始编写地图
• 根据echarts的文档和vue的相关语法，编写地图，最后将数据传入option中去

<template>
  <div>
    <div id="mychart1" style="width: 600px;height:500px;">展示地图的地方</div>
  </div>
</template>
<script>
import echarts from "echarts"; //引入echarts
import "echarts/map/js/china"; //引入地图
import jsonp from "jsonp"; //引入jsonp
let option = {
  title: {
    //标题
    text: "实时xx地图",
    x: "center", //居中
    textStyle: {
      //标题 样式
      color: "#9c0505",
    },
  },
  tooltip: {
    //提示信息
    trigger: "item", //类型
    //地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
    formatter: "地区：{b}<br/>确诊：{c}",
  },
  series: [
    //数据
    {
      //图表的类型
      type: "map",
      map: "china",
      data: [],
      label: {
        //图形上的文本标签,用于显示数据信息
        show: true,
        color: "red",
        fontSize: 10,
      },
      //当前视角的缩放比例。
      zoom: 1.3,
      itemStyle: {
        //地图区域的多边形,图形样式。
        borderColor: "blue",
      },
      emphasis: {
        //高亮状态
        label: {
          //图形上的文本标签,用于显示数据信息
          color: "#055",
          fontSize: 12,
        },
        itemStyle: {
          //地图区域的多边形 图形样式。
          areaColor: "yellow",
        },
      },
    },
  ],
  visualMap: {
    //视觉地图，视觉映射组件
    type: "piecewise", //分段型
    show: true,
    pieces: [
      // 不指定 max，表示 max 为无限大（Infinity）。
      // 不指定 min，表示 min 为无限大（-Infinity）。
      { min: 10000 },
      { min: 1000, max: 9999 },
      { min: 100, max: 999 },
      { min: 10, max: 99 },
      { min: 1, max: 9 },
      { value: 0 },
    ],
    inRange: {
      //颜色范围
      color: ["#FFF4DF", "#ffaa85","#AD0018","#570006"],
    },
    itemWidth: 10,
    itemHeight: 10,
  },
  toolbox: {
    show: false,
    orient: "horizontal",
    left: "right",
    top: "top",
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {},
    },
  },
};

export default {
  data() {
    return {
      myChart: "",
    };
  },
  mounted() {
    //钩子函数，dom加载完毕后加载此函数中的内容,此处加载init方法
    this.getData();
    //基于准备好的dom，初始化echarts实例
    //使用刚指定的配置项和数据显示图表。
    this.myChart = echarts.init(document.getElementById("mychart1")); 
    this.myChart.setOption(option);
  },
  methods: {
    getData() {
      //获取网络接口数据
      jsonp(
        "https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1585397547299",
        (err, data) => {
          // console.log(data.data.list)
          //data.data.list
          //使用js里面map()方法，循环遍历后，获取数据里面一部分值。
          var lists = data.data.list.map((item) => {
            return { name: item.name, value: item.value };
          });
          console.log(lists);
          option.series[0].data = lists;
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(option);
        }
      );
    },
  },
};
</script>
<style scoped></style>

数据准备

• 使用的新浪的数据接口，URL如下

• https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1585397547299

• 数据分析如下，继续分析可得这个api还包含省内地级市数据，可以得知获取方法就是data.list.city.xxx,再利用正则匹配即可获取市级数据，可做xx省的xx地图
  

最终效果