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.  
posted @ 2023-02-23 08:56  Dollom  阅读(857)  评论(0)    收藏  举报