vue3+axios使用echarts的地图

vue3+axios使用echarts的地图

概述：

在echarts的官网是直接提供的js代码和网上，如何在vue3中跑起来（各种跨域，各种报错让我想die）

附加：之前一直跑不起来的很大原因是完全不清楚生命周期，破案了

友情链接：

(75条消息) vue+Echarts动态数据已经赋值，但是无法渲染页面的问题_高小胖爱胡小宝的博客-CSDN博客

引用本地json

echarts5.0取消了内置的map（地图不合法....）

有两类方法：

a.下载china.json等文件并放置在public文件夹

创建ChinaMap2.vue

在script部分：

import * as echarts from "echarts";
import usaJson from "/public/USA.json";//此处必须要用绝对路径（网上百度未理解)

在vue2中本地的json文件存放在static文件夹下

在vue3中本身不带static文件夹，我们约定俗成把本地json放在public文件夹下（或者在public下再新建static文件夹）

我们先对官网的示例进行一些改造从而跑起来...

我虽然用的是vue3，但觉得现阶段vue2的data methods的写法非常清晰舒服，目前还没有感受到vue3的setup之好处

//echarts的地图要点：引入地图json文件后要注册 并且写正确的名字，必须是“CHINA” "USA"
//echarts.registerMap("USA", usaJson);

export default {
  name: "eTest",
  data() {
    return {
      myChart: "",
    };
  },

  methods: {
    initChart() {
      var chartDom = document.getElementById("main");
      this.myChart = echarts.init(chartDom);
      var option;
      this.myChart.showLoading();
      console.log(usaJson);
      //usaJson早就被引入 成功注册地图  
      echarts.registerMap("USA", usaJson);
      this.myChart.hideLoading();
        
    //像这种纯静态的option也可以写到一个src/views/mapOption.js再去引入减少代码量
    //例如ChinaMap3
        
      option = {
        title: {
          text: "USA Population Estimates (2012)",
          subtext: "Data from www.census.gov",
          sublink: "http://www.census.gov/popest/data/datasets.html",
          left: "right",
        },
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
        },
        visualMap: {
          left: "right",
          min: 500000,
          max: 38000000,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
          text: ["High", "Low"],
          calculable: true,
        },
        toolbox: {
          show: true,
          //orient: 'vertical',
          left: "left",
          top: "top",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "USA PopEstimates",
            type: "map",
            roam: true,
            map: "USA",
            emphasis: {
              label: {
                show: true,
              },
            },
            data: [
              { name: "Alabama", value: 4822023 },
              { name: "Alaska", value: 731449 },
              { name: "Arizona", value: 6553255 },
              { name: "Arkansas", value: 2949131 },
              { name: "California", value: 38041430 },
              { name: "Colorado", value: 5187582 },
              { name: "Connecticut", value: 3590347 },
              { name: "Delaware", value: 917092 },
              { name: "District of Columbia", value: 632323 },
              { name: "Florida", value: 19317568 },
              { name: "Georgia", value: 9919945 },
              { name: "Hawaii", value: 1392313 },
              { name: "Idaho", value: 1595728 },
              { name: "Illinois", value: 12875255 },
              { name: "Indiana", value: 6537334 },
              { name: "Iowa", value: 3074186 },
              { name: "Kansas", value: 2885905 },
              { name: "Kentucky", value: 4380415 },
              { name: "Louisiana", value: 4601893 },
              { name: "Maine", value: 1329192 },
              { name: "Maryland", value: 5884563 },
              { name: "Massachusetts", value: 6646144 },
              { name: "Michigan", value: 9883360 },
              { name: "Minnesota", value: 5379139 },
              { name: "Mississippi", value: 2984926 },
              { name: "Missouri", value: 6021988 },
              { name: "Montana", value: 1005141 },
              { name: "Nebraska", value: 1855525 },
              { name: "Nevada", value: 2758931 },
              { name: "New Hampshire", value: 1320718 },
              { name: "New Jersey", value: 8864590 },
              { name: "New Mexico", value: 2085538 },
              { name: "New York", value: 19570261 },
              { name: "North Carolina", value: 9752073 },
              { name: "North Dakota", value: 699628 },
              { name: "Ohio", value: 11544225 },
              { name: "Oklahoma", value: 3814820 },
              { name: "Oregon", value: 3899353 },
              { name: "Pennsylvania", value: 12763536 },
              { name: "Rhode Island", value: 1050292 },
              { name: "South Carolina", value: 4723723 },
              { name: "South Dakota", value: 833354 },
              { name: "Tennessee", value: 6456243 },
              { name: "Texas", value: 26059203 },
              { name: "Utah", value: 2855287 },
              { name: "Vermont", value: 626011 },
              { name: "Virginia", value: 8185867 },
              { name: "Washington", value: 6897012 },
              { name: "West Virginia", value: 1855413 },
              { name: "Wisconsin", value: 5726398 },
              { name: "Wyoming", value: 576412 },
              { name: "Puerto Rico", value: 3667084 },
            ],
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
    
  mounted() {
    this.initChart();
  },
};

b.下载map的包放在node moudle下

import chinaJson from "echarts/map/js/china.js"

引用网络json+引用后端数据

当我们使用axios向网络，像后端引用数据时，开始一个个匪夷所思的错误

这其中一部分是跨域请求造成的问题：

如果是后端：

Access-Control-Allow-Origin

但如果我们请求网络资源，并不能改变后端呢？？

问题A：前端解决跨域问题（配置proxy的代理）

配置完代理后重新启动！！！重刷新不管用！！！

什么是跨域问题：

在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号(如存在)相同，则允许相互访问。

比如 vue项目的端口是8081

自己电脑开启了一个8080的端口，请求/getData就会放回json数据。

正确的做法是在配置文件中添加跨域：

vue2直接在config/index.js中配置

vue3需要在根目录下创建一个vue.config.js的配置文件

//vue.config.js
module.exports = {
  outputDir: 'dist',   //build输出目录
  assetsDir: 'assets', //静态资源目录（js, css, img）
  lintOnSave: false, //是否开启eslint
    
  devServer: {
    open: true, //是否自动弹出浏览器页面
    host: "localhost",
    port: '8080',
    https: false,
    proxy: {
        '/api': {
            target: 'https://echarts.apache.org', //API服务器的地址
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            },
        },
  },
}
}

然后在axios请求时这么写（此时的api会被替换成上面配置的target）

    initChart() {
      axios({
        method:"get",
        url:"/api/examples/data/asset/geo/USA.json"
      }).then((res)=>{
        this.usaJson=res.data;
        this.initChart2();
      })
    },

问题B：axios的异步请求

axios请求数据所造成的系列问题处理方法：
axios是异步的，其中的then是回调，也就是说会继续执行后面的代码，在不考率这一点的时候，我们在回调中进行log打印觉得已经得到了数据，但其实后面的代码在执行时对着空数据做事。这个错不明显且让人疑惑

在看上去成功读到数据，网页却没有显示时，考虑axios的异步请求是否成功，考虑自己对于res.data的属性写对了没，之前dataList写成datalist，哪里都不报错，vscode也没提示，找了半天

一种方法：将我们的主要逻辑全部放在回调中（.then)

第二种方法：在函数名前加async，在axios的调用前加await

methods: {
    async getData(){
    //会阻塞在此处等待
    var res=await axios.get("http://localhost:8081/test5")
    this.myjson=res.data.dataList;
    console.log(this.myjson);
    }
},

附加点：axios的请求和封装

（还没有搞懂请求响应拦截什么的）

完整过一遍axios，再也不怕写请求 - 掘金 (juejin.cn)

如果没有给axios配置baseURL，在每次写都是http://localhost:8080/....

axios的基本知识

一种是

axios.post('/post',data).then((res)=>{
  console.log(res)
})

另一种是

axios({
  method:'post',
  url:'/post',
  data:data
}).then(...)

当我们需要传入参数时： http://localhost:8080/data.json?id=12,应该如何去获取呢？

axios.get('/data.json',{
      params:{
        id:12
      }
    }).then((res)=>{
      console.log(res)
    })

axios的封装（参考tansci）

现在utils里封装axios.js 配置了axios的基本信息，响应拦截

//export default API
export default axios

在api中的systemapi：一次性写好所有的会用到请求的函数（这里每一个参数都是params，继续看知道为什么）

在views中

成功代码：

地图来自网络请求，数据来自mock接口模拟

<template>
  <div class="echartss">
    <div id="main" style="width: 1000px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
//import usaJson from "/public/USA.json"
//import option from "./mapOption.js";

export default {
  name: "eTest",
  data() {
    return {
      myChart: "",
      usaJson:[],
      datax: [],
      max:"",
      min:"",
    };
  },

  methods: {
    initdata() {
      axios({
        method: "get",
        url: "http://localhost:8081/test5", //mock接口
      }).then((res) => {
          
        //网上找来的最大最小值迅速get
        console.log(res.data.dataList)
        this.datax=res.data.dataList;
        this.max=Math.max.apply(Math,this.datax.map(function(o){
          return o.value;
        }))
        this.min=Math.min.apply(Math,this.datax.map(function(o){
          return o.value;
        }))

        this.initChart();
      });
    },
    initChart() {
      //var ROOT_PATH = 'https://echarts.apache.org/examples';
      axios({
        method:"get",
        url:"/api/examples/data/asset/geo/USA.json"
      }).then((res)=>{
          //都写在回调函数里，呜呜呜，之前莫名奇妙了100回
        this.usaJson=res.data;
        this.initChart2();
      })

    },

    initChart2(){
      var chartDom = document.getElementById("main");
      //this.myChart = echarts.init(chartDom);
      console.log(this.usaJson);
      echarts.registerMap("USA", this.usaJson);
      //console.log(echarts.getMap());
      console.log(echarts.version);
      this.myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "USA Population Estimates (2012)",
          subtext: "Data from www.census.gov",
          sublink: "http://www.census.gov/popest/data/datasets.html",
          left: "right",
        },
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
        },
        visualMap: {
          left: "right",
          min:this.min,
          max:this.max,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
          text: ["High", "Low"],
          calculable: true,
        },
        toolbox: {
          show: true,
          //orient: 'vertical',
          left: "left",
          top: "top",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "USA PopEstimates",
            type: "map",
            roam: true,
            map: "USA",
            emphasis: {
              label: {
                show: true,
              },
            },
            data: this.datax,
          },
        ],
      };
      this.myChart.setOption(option);
    }
  },

  mounted() {
    this.initdata();
  },
};
</script>

<style>
</style>

加一个简单的elementplus玩玩：

先把官网的一个代码复制过来，发现不行，报错难以理解

仔细一看：

我用的是js，这里怎么是ts。把lang=ts删除，成功

：data 响应式 后到前可变

infos：

然后在methods产生变化

总代码：

<template>
  <h1>这里是Demo！</h1>
  <el-row>
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button @click="showinfo">更新infos</el-button>
  </el-row>
  <p>{{ info }}</p>
  <p>{{ infos }}</p>
  <el-table :data="infos" border style="width: 100%">
    <el-table-column prop="name" label="地区名称" width="180" />
    <el-table-column prop="value" label="销售总额" />
  </el-table>

  <div class="echartss">
    <div id="main" style="width: 1000px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import chinaJson from "echarts/map/js/china.js";

export default {
  name: "demo",
  data() {
    return {
      infos: [{ name: "waiting", value: "undefined" }],
      info: "hello joker",
      myChart: "",
      datax: [],
      max:"",
      min:"",
    };
  },

  methods: {
    initdata() {
      axios({
        method: "get",
        url: "http://localhost:8081/test4",
      }).then((res) => {
        console.log(res.data.dataList)
        this.datax=res.data.dataList;
        this.max=Math.max.apply(Math,this.datax.map(function(o){
          return o.value;
        }))
        this.min=Math.min.apply(Math,this.datax.map(function(o){
          return o.value;
        }))

        this.initChart();
      });
    },
    initChart() {
      //var ROOT_PATH = 'https://echarts.apache.org/examples';
      var chartDom = document.getElementById("main");
      //this.myChart = echarts.init(chartDom);
      echarts.registerMap("China", chinaJson);
      //console.log(echarts.getMap());
      console.log(echarts.version);
      this.myChart = echarts.init(chartDom);
      var option = {
        title: {
          text: "USA Population Estimates (2012)",
          subtext: "Data from www.census.gov",
          sublink: "http://www.census.gov/popest/data/datasets.html",
          left: "right",
        },
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
        },
        visualMap: {
          left: "right",
          min:this.min,
          max:this.max,
          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#a50026",
            ],
          },
          text: ["High", "Low"],
          calculable: true,
        },
        toolbox: {
          show: true,
          //orient: 'vertical',
          left: "left",
          top: "top",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "China PopEstimates",
            type: "map",
            roam: true,
            map: "china",
            emphasis: {
              label: {
                show: true,
              },
            },
            data: this.datax,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    showinfo() {
      axios
        .get("http://localhost:8081/test4")
        .then((response) => {
          this.infos = response.data.dataList;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

  mounted() {
    this.initdata();
    this.showinfo();
  },
};
</script>

<style>
</style>