在vue中使用 Echarts组件化 --> 初始化地图

我们紧接着 之前的博客继续往后做，之前的博客中的 结构是可以复用的，那么就将之前的 组织结构 根据自己的需求在做一遍，并且把图表已经实现的基本功能也拿过去。根据自己的 需求留下 需要的部分。

看起来可能很多，其实说出来就能理解了

大部分组件都需要的功能：

1.初始化实例调用、初始化chartInstance对象、获取服务器数据、更新图表、分辨率适配(销毁组件的时候，取消监听器)

在具体的代码中删除和 数据 有关的部分，保留结构，这样根据自己的需求， 对数据进行更改 ，结构根据自己的需求进行调整，就可以了。能省下很多写重复代码的时间。

<!--
要呈现的具体的组件
 -->
<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null,

      // 服务器返回的数据
      allDate: null,
    };
  },
  destroyed() {
    // 在组件销毁的时候，需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdaper);
  },
  // 初始化实例调用
  mounted() {
    this.initCharts();
    this.getData();

    //监听事件  第一个参数是事件的类型 (如 "click" 或 "mousedown") 第二个参数是事件触发后调用的函数。
    window.addEventListener("resize", this.screenAdaper);

    //在页面加载完成的时候，主动进行屏幕的适配
    this.screenAdaper();
  },
  methods: {
    // 初始化 chartInstance 对象
    initCharts() {
      //创建 chartInstance 对象
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, "dark");

      // 对图表初始化配置的控制
      const initOption = {};
      this.chartInstance.setOption(initOption);
    },
    // 获取服务器的数据
    async getData() {
      //http:// ip:端口/文件路径
      // const ret = await this.$axios.get("http://127.0.0.1:80/api/sellers");
      // 从服务器请求的数据
      const ret = [
        { name: "商品1", value: 50 },
        { name: "商品2", value: 60 },
        { name: "商品3", value: 70 },
        { name: "商品4", value: 80 },
        { name: "商品5", value: 90 },
        { name: "商品6", value: 100 },
        { name: "商品7", value: 110 },
        { name: "商品8", value: 120 },
      ];
      this.allDate = ret;

      this.updateChart();
      /*
       this.$axios.get("") 返回的是promise对象 ，可以用 await 来解析数据
       当一个方法用 await 解析 ，方法前面需要加上 async 修饰
       **/
    },
    // 更新图表
    updateChart() {
      const dataOption = {};
      this.chartInstance.setOption(dataOption);
    },
    // 当浏览器的大小发生变化的时候，会调用的方法，来完成屏幕的适配
    screenAdaper() {
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
      // 和分辨率大小相关的配置项
      const adapterOption = {};
      this.chartInstance.setOption(adapterOption);
      // 在屏幕大小发生变化后记得用实例调用 resize 方法 让它实时改变
      this.chartInstance.resize();
    },
  },
};
</script>

<style>
</style>

到这里就已经 把结构筛选完了，剩下的 根据自己的需求去进一步添加 和 更改。

 

我们需要做地图的话，首先需要把地图的数据给导入到项目中。

　　我获取地图矢量数据的链接：地图矢量数据

 

我们首先是展示这个地图，所以在初始化 chartInstance 对象 的时候就获取 地图的矢量数据

接下来就是 对图表初始化的操作：

看一下初始化地图的效果：