前言

第五天啦！！！加油加油加油！！！

---

一、使用echarts插件

方法一：直接引入echarts 直接挂载main.js vue实例上
方法二：在组件内部使用图标 echarts
方法三：开发成Vue插件

安装方式：从 npm 获取
npm install echarts@4.8.0 --save
引入：main.js导入echarts、挂载原型

//方法一：引入echarts
import echarts from 'echarts';
//挂载原型
Vue.prototype.$echarts = echarts

//方法二：组件单独引入echarts，不用使用this.$echarts
import echarts from "echarts";
var myChart = echarts.init(document.getElementById(id));

使用：

    <!-- 显示图表的容器 -->
    <div id="main" style="width: 400px; height: 300px"></div>

mounted里面调用方法，并且传参

  mounted() {
    console.log(this.$echarts);
    // 绘制图形
    this.line("main");
  },

初始化一个 echarts 实例并通过 setOption 方法生成一个简单的折线图

  methods: {
    line(id) {
      // 绘制线
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById(id));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };

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

二、绘制中国地图

1.引入对应省份的js文件

node_modules / echarts / map / js

main.js文件：

//引入对应省份的js
import '../node_modules/echarts/map/js/china'

2.基础使用

配置项手册
调用方法：

    <!-- 显示图表的容器 -->
    <div id="map" style="width: 400px; height: 300px"></div>

    mounted() {
    console.log(this.$echarts);
    // 绘制图形
    this.line("main");
    this.map("map");
  },

methods：{
	    // 绘制地图
    map(id) {
      // 绘制线
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById(id));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "地图",
        },
        tooltip: {},
        legend: {},
        series: [
          {
            name: "",
            type: "map",
            map: "china",
            data: [
              {
                name: "北京",
                value: 200,
              },
              {
                name: "天津",
                value: 200,
              },
            ],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
}

3.使用方法三，将echarts开发成Vue插件

（1）新建文件夹Plugins/echarts.js
将echarts开发成Vue插件，里面可以编写echarts方法，之后可以直接调用方法。

// 将echarts开发成vue插件引入
import echarts from 'echarts'
//创建install函数
const install = function (Vue) {
    // js方法：给对象添加属性或者方法
    // Object.defineProperties('Object','属性','options配置内容或者配置项')
    // Object是原对象 options是操作原对象的配置信息
    Object.defineProperties(Vue.prototype, {
        $echarts: {
            get() {
                return {
                    //绘制折线
                    line() {
                        console.log('绘制线');
                    }
                }
            }
        }
    })
}
export default install

（2）main.js引入echarts.js文件

//方法一引入echarts
// import echarts from 'echarts'
//将echarts挂载到原型
// Vue.prototype.$echarts = echarts
//方法二：单独组件引入---导入和使用
//方法三：封装echarts插件
import echarts from './plugins/echarts'
Vue.use(echarts)

4.使用china.js

main.js文件引入china.js

import 'echarts/map/js/china';

Plugins/echarts.js文件增加地图方法：

//绘制地图---
chinaMap(id) {
  // 绘制线
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(id));
  // 指定图表的配置项和数据
  var option = {
  tooltip: {},
  series: [{
  name: "省",
  type: "map",
  map: 'china',
  data: [{
  name: "北京",
  value: 200
  }],
 }, ],
};
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

5.新建Covid/CovidMap

使用chinaMap

  <div id="main"></div>
  
  mounted() {
    console.log(this);
    this.$echarts.chinaMap("main");
  },
  
  #main {
  height: 8rem;
  width: 7rem;
}

对Plugins/echarts.js文件增加地图方法进行相关配置（映射颜色，大小）

//绘制地图---
                    chinaMap(id) {
                        // 绘制线
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById(id));
                        // 指定图表的配置项和数据
                        var option = {
                            tooltip: {},
                            visualMap: [{
                                orient: "vertical",
                                type: "piecewise",
                                pieces: [ // 配置颜色区间
                                    {
                                        min: 0,
                                        max: 0,
                                        color: "#FFFFFF"
                                    },
                                    {
                                        min: 1,
                                        max: 10,
                                        color: "#FDFDCF"
                                    },
                                    {
                                        min: 10,
                                        max: 100,
                                        color: "#FE9E83"
                                    },
                                    {
                                        min: 100,
                                        max: 500,
                                        color: "#E55A4E"
                                    },
                                    {
                                        min: 500,
                                        max: 10000,
                                        color: "#4F070D"
                                    }
                                ]
                            }],
                            series: [{
                                name: "省",
                                type: "map",
                                map: 'china',
                                zoom: 1.2, //放大
                                label: {
                                    show: true, //是否显示省份名称
                                    fontSize: 9,
                                },
                                data: [{
                                        name: "北京",
                                        value: 200
                                    },
                                    {
                                        name: "新疆",
                                        value: 100
                                    },
                                ],
                            }, ],
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }

三、使用 挖数据 调用全国各个城市疫情数据

1.接口地址

https://cspe.api.storeapi.net/api/94/219format=json&appid=13847&sign=ce1d300a7fd3c3c4d56c7a0516fd05d0

base.js文件新增baseUrl2接口：

//所有网络请求/接口的地址
const base = {
    //网址的配置路径
    // 【天行数据】疫情信息
    baseUrl: 'http://api.tianapi.com',
    covidInfo: '/ncov/index?key=412004cd81d5f87c2ea0900ac5b5f4c1', //疫情接口参数?key=412004cd81d5f87c2ea0900ac5b5f4c1
    // 【挖数据】全国各个城市疫情数据
    baseUrl2: 'https://cspe.api.storeapi.net',
    chinaMap: '/api/94/219',
}
export default base

新增Secret.js文件，作为密钥文件

//密钥文件
export default {
    // 【挖数据】全国各个城市疫情数据的密钥
    sign: '?format=json&appid=13847&sign=ce1d300a7fd3c3c4d56c7a0516fd05d0',
}

index.js文件新增chinaMap()方法并且导入密钥文件

//密钥文件
import Secret from './Secret'

//【挖数据】全国各个城市疫情数据
    //地图城市数据
    chinaMap() {
        return axios.get(base.baseUrl2 + base.chinaMap + Secret.sign)
    },

2.请求数据

在CovidMap.vue文件夹

  mounted() {
    console.log(this);
    //使用中国地图
    this.$echarts.chinaMap("main");
    // 请求数据
    this.$api.chinaMap().then((res) => {
      console.log(res.data);
    });
  },

3.字段转换

地图数据结构： [{name:’’,value:’’}]
所以得处理拿到的数据[{xArea: “西藏” curConfirm: “0”}]，将字段进行转换。

  mounted() {
    console.log(this);
    //使用中国地图
    //地图数据结构： [{name:'',value:''}]
    //this.$echarts.chinaMap("main");
    // 请求数据
    this.$api.chinaMap().then((res) => {
      console.log(res.data.retdata);
      
      let chinaArr = []; //装地图数据
      res.data.retdata.forEach((element) => {
        //forEach遍历数组每一项，也就是这里的类
        //xArea: "西藏"   curConfirm: "0"
        let temp = {};
        temp.name = element.xArea;
        temp.value = element.curConfirm;
        chinaArr.push(temp);
      });
      console.log(chinaArr);
    });
  },

4.字段插入地图

将chinaArr [ ] 作为参数传给地图

  mounted() {
    。。。
      console.log(chinaArr);
      // 插到地图上
      this.$echarts.chinaMap("main", chinaArr);
    });
  },

地图接收数据

 chinaMap(id, data) {
 series: [{
	data
 }