Vue3.0按需引入vue-echarts6.x版本—0.1-绘制中国地图

关于在Vue3.0按需引入vue-echarts6.x会是一个系列，其中会包含：“绘制地图”、“地图样式配置”、“地图数据渲染”、“地图上的数据轮播”、“地图下钻”、“解决轮播和鼠标悬浮的冲突问题”……

版本

vue-echarts的文档链接

"vue": "^3.0.0", 

"echarts": "^5.1.2",

"vue-echarts": "^6.0.0-rc.6",

正文

今年开春后，开始使用vue3.0进行开发，以之前也做过的“地图下钻”为例，之前的地图下钻例子详情地址→

// 之前的开发版本是：

"vue": "^2.5.2",

"vue-echarts-v3": "^2.0.1",

vue-echarts在一个月前更新了“6.0.0-rc.6版本”，这个版本适用于Echarts5.0+。进入开发：

Vue3.0安装

首先确定自己的电脑是否安装了Vue3.0，具体查看步骤如下：

Win+R --> 打开cmd --> npm install -g vue@next

文档中有一句话，如下图：

接下来建立一个Vue3.0的项目，具体命令如下：

vue create v3.0-v-echarts

配置项的选择如下图所示，需要说明的是，可以根据自己的需求选择配置：

项目新建成功后：

cd v3.0-v-echarts

npm run serve

此时，这个项目是一个Vue3.0的项目，可以在package.json中查看当前的版本。

好了，可以开始引入echarts、vue-echarts啦，我们要开始画图啦。

开始之前，来看文档来→​

不看文档也没关系，接下来直接看代码：

vue-echarts安装

npm install echarts vue-echarts

// 安装后的 ​版本
"vue": "^3.0.0",
"echarts": "^5.1.2",
"vue-echarts": "^6.0.0-rc.6",

main.js中引入vue-echarts，并注册全局组件

// 页面位置：src/main.js
……

// 引入vue-echarts
import ECharts from 'vue-echarts';

const app = createApp(App)

……

// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts)

接下来直接进入代码

目录：src/views/child/zjMap.vue

<template>
  <v-chart id="map" class="map_chart" autoresize :option="option" ref="map" />
</template>

<script>
// 引入echarts 核心代码
import { init, use, registerMap } from "echarts/core";
// 默认是 canvas 格式，可以修改为 SVGRenderer
import { CanvasRenderer } from "echarts/renderers";
/**
 * 按需引入自己需要的配置项模块，以减少打包的体积
 * 本次是地图下钻，仅引入使用的模块
 * 此处用到了toolbox中的下载图片，即ToolboxComponent
 * */ 
import { ToolboxComponent } from "echarts/components";
/*
 * 引入需要的 模块API，这里只用到了地图，其他图表类型，如：LineChart/BarChart……
 * 可以理解为：图表的Type + "Chart"
 * 不确定是否存在，可以查看源码：node_modules/echarts/charts
 */
import { MapChart } from "echarts/charts";
// 引入Vue3.0的 API
import { ref } from "vue";
// 引入地图Json包
import china from "@/assets/mapJson/china.json";

use([CanvasRenderer, ToolboxComponent]);

// 绘制地图
registerMap("china", china);
// 将刚才引入的MapChart用起来
use([MapChart]);

export default {
  name: "chinaMap",
  setup() {
    const option = ref({
      backgroundColor: "transparent",
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {},
        },
      },
      series: [
        {
          name: "地图",
          type: "map",
          map: "china",
          zlevel: 2,
        },
      ],
    });
    return {
      option,
    };
  },
};
</script>
<style scoped>
.map_chart {
  margin: 0 auto;
  width: 800px;
  height: 800px;
  border: 1px solid #333;
}
</style>

其他页面引入 - 在about.vue页面引入

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <china-map />
  </div>
</template>

<script>
import chinaMapfrom "./child/chinaMap";
export default {
  name: "About",
  components: {
    chinaMap,
  },
};
</script>

--------------

至此，在vue3.0中使用vue-echarts6.x版本 - 绘制地图完成。

后续会接着深入，在全部更新完成后，会整理成一个系列。

文章会同步更新到微信公众号 “DataShow Charts”，可以扫码关注下，源码的链接会发在公众号的文章里，希望多多关注，谢谢你呀~。