Vue3使用EChart 显示地图图表

Vue3使用EChart 显示地图图表

 

安装:

npm install echarts

 

项目中进行导入

• 可以直接在需要使用图表的页面进行导入

import * as echarts from "echarts"

• 导入对于 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);
})

1. 对盒子进行元素绑定

2. 对设置进行设置类型约束

3. myChart 通过 应用配置项达成显示

4. ! 的作用就是让TS不报错

 

复制EChart中的代码

let option: EChartsOption = {
        title: {
           ....
        },
        tooltip: {
           ....
        },
        toolbox: {
          ....
        },
        ....其他配置项...
    }

• 将每一个所需的配置项进行复制并且放到 option中

 

把地图加载进组件里

• 在 option 配置项中

 series: [{
                name: '全国销量分布图',
                type: 'map',
                map: 'CHINA',
....
            }]

1. 此处的map是 一个JSON的变量名

echarts.registerMap('CHINA', chinaJSON as any);

• 是一个地图包的 JSON文件

 

拿到地图包

需要使用工具网页

http://datav.aliyun.com/portal/school/atlas/area_selector

1. 复制 JSON API 在浏览器中进入 JSON

2. 复制其中内容保存为 本地JSON文件

3. 在项目的 asset 文件夹下进行引入

4.