vue3 echarts使用外部json调用不同的城市地图

最新推荐文章于 2024-08-17 16:42:17 发布

拖下去砍了

最新推荐文章于 2024-08-17 16:42:17 发布

阅读量820

点赞数

文章标签： echarts json 前端

本文链接：https://blog.csdn.net/qq_43052188/article/details/122068951

版权

本文介绍了如何在 Vue3 项目中结合 ECharts 框架，通过导入外部 JSON 数据来实现不同城市地图的展示。主要步骤包括：新增 ECharts 集成，导入所需的城市地图，注册并加载外部 JSON 文件，最后根据 JSON 内容修改地图以显示指定的二级城市。

摘要由CSDN通过智能技术生成

1.新增echarts

npm install echarts --save

2.导入城市地图

import * as echarts from 'echarts'
import 'echarts/map/js/province/shanxi'

3.城市地图初始化

let demo = this.$echarts.init(document.getElementById('demo'))
demo.setOption({
        // 图表主标题
        title: {
          // 文本
          text: '',
          // 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          top: 25,
          // 值: 'left', 'center', 'right' 同上
          left: 'center',
          // 文本样式
          textStyle: {
            // 字体大小
            fontSize: 25,
            // 字体粗细
            fontWeight: 650,
            // 字体颜色
            color: '#fff'
          }
        },
        series: [
          {
            // 类型
            type: 'map',
            // 系列名称，用于