Vue3使用EChart 显示地图图表
安装:
npm install echarts
项目中进行导入
-
可以直接在需要使用图表的页面进行导入
import * as echarts from "echarts"
import { EChartsOption, PieSeriesOption } from "echarts"
// PieSeriesOption 只是示例饼图的类型约束,不同的图表有不同的约束,请对应选择
给予图标一个可以展示的盒子
<div id="map" style="width: 100%;height:400px;"></div>
-
需要绑定一个具有id的盒子
编写设置项
-
图表的生命周期等级需要在挂载期中编写
onMounted(() => {
let myChart = echarts.init(document.getElementById('map')!);
let option: EChartsOption = {}
myChart.setOption(option);
})
-
对盒子进行元素绑定
-
对设置进行设置类型约束
-
myChart
通过 应用配置项达成显示 -
!
的作用就是让TS不报错
复制EChart中的代码
let option: EChartsOption = {
title: {
-
将每一个所需的配置项进行复制并且放到 option中
把地图加载进组件里
-
在 option 配置项中
series: [{
name: '全国销量分布图',
type: 'map',
map: 'CHINA',
-
此处的map是 一个JSON的变量名
echarts.registerMap('CHINA', chinaJSON as any);
-
是一个地图包的 JSON文件
拿到地图包
需要使用工具网页
http://datav.aliyun.com/portal/school/atlas/area_selector
-
复制 JSON API 在浏览器中进入 JSON
-
复制其中内容保存为 本地JSON文件
-
在项目的 asset 文件夹下进行引入
-