echarts中国地图显示，涟漪效果vue版本

最新推荐文章于 2024-07-11 15:59:08 发布

CJW-Coder

最新推荐文章于 2024-07-11 15:59:08 发布

阅读量1.3k

点赞数 2

分类专栏：前端其他文章标签： echarts vue 地图插件

本文链接：https://blog.csdn.net/qq_42143163/article/details/98738684

版权

本文介绍了如何在Vue项目中使用Echarts实现中国地图并添加涟漪效果。首先通过npm安装echarts，然后在Vue组件内导入echarts库及中国地图数据。最后展示实现该效果的主要代码。

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

1.先全局下载echarts npm install echarts --save
2. 在vue 中引入
import echarts from ‘echarts’

import ‘echarts/map/js/china’
3.效果图
在这里插入图片描述
4.主要代码

<template>
	<div >
		<div id="main" style="width: 600px;height:600px ;margin: 100px auto;"></div>
	</div>
</template>

<script>
	import echarts from 'echarts'
	import 'echarts/map/js/china'
	export default {
   
		mounted() {
   
			var data = [
				{
   
					name:'沈阳',
					value:100
				},
				{
   
					name:'长春',
					value:101
				},
				{
   
					name:'哈尔滨',
					value:150
				},
				{
   
					name:'北京',
					value:100
				},
				{
   
					name:'天津',
					value:100
				},
				{
   
					name:'呼和浩特',
					value:151
				},
				{
   
					name:'银川',
					value:151
				},
				{
   
					name:'太原',
					value:151
				},
				{
   
					name:'石家庄',
					value:151
				},
				{
   
					name:'济南',
					value:151
				},
				{
   
					name:'郑州',
					value:151
				},
				{
   
					name:'西安',
					value:151
				},
				{
   
					name:'武汉',
					value:151
				},
				{
   
					name:'南京',
					value:151
				},
				{
   
					name:'合肥',
					value:151
				},
				{
   
					name:'上海',
					value:151
				},
				{
   
					name:'长沙',
					value:151
				},
				{
   
					name:'南昌',
					value