vue+echarts实现中国地图流动效果(步骤详解)

@vue+echarts实现中国地图流动效果

#话不多说看效果图

vue+echarts实现中国地图流动效果(步骤详解)_第1张图片

操作步骤:

执行命令:npm run echarts -s 并回车

vue+echarts实现中国地图流动效果(步骤详解)_第2张图片

看到这样的提示代表安装成功 PS:网络不好的情况建议用cnpm淘宝镜像(全局终端执行命令:npm i -g cnpm --registry=https://registry.npm.taobao.org)

vue+echarts实现中国地图流动效果(步骤详解)_第3张图片

下载china.js

链接: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 提取码: gjz4

引入

import echarts from 'echarts/lib/echarts';
import '@/map/china.js';

写一个echarts容器 绑定ref

配置option (有必要的注释都已标记)

初始化echarts就可以了

this.myEchart = echarts.init(this.$refs.myEchart);
this.myEchart.setOption(option);

到此这篇关于vue+echarts实现中国地图流动效果的文章就介绍到这了,更多相关vue+echarts中国地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue+echarts实现中国地图流动效果(步骤详解))