echars实现中国地图省级自动切换

最终实现结果

安装 echars npm install echarts --save
在 main.js 中引入
import echarts from ‘echarts’ //引入 echars
Vue.prototype.$echarts = echarts // 全局化
import “echarts/lib/chart/map”;
import ‘echarts/map/js/china.js’ // 引入中国地图的包(大概)

在页面直接把代码拷贝进去就可以了

<template><div id="myChart" :style="{width: '100%', height: '100%'}"></div>
</template>
<script>
export default {name: "echars",mounted() {this.drawLine();},methods: {drawLine() {// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById("myChart"));let option = {visualMap: {min: 0,max: 10000,left: "left",top: "bottom",text: ["高", "低"],calculable: false,orient: "horizontal",inRange: {color: ["#e0ffff", "#006edd"],symbolSize: [30, 100],},},tooltip: {padding: 0,enterable: true,transitionDuration: 1,textStyle: {color: "#000",decoration: "none",},},series: [{label: {normal: {show: true,},emphasis: {show: false,},},name:'核废料坑',type: "map",mapType: "china",itemStyle: {normal: {label: {show: false,},},emphasis: {label: {show: true,},},},data: [{name: "南海诸岛",value: 0,},{name: "北京",value: 54,},{name: "天津",value: 13,},{name: "上海",value: 40,},{name: "重庆",value: 75,},{name: "河北",value: 13,},{name: "河南",value: 83,},{name: "云南",value: 11,},{name: "辽宁",value: 19,},{name: "黑龙江",value: 15,},{name: "湖南",value: 69,},{name: "安徽",value: 60,},{name: "山东",value: 39,},{name: "新疆",value: 4,},{name: "江苏",value: 31,},{name: "浙江",value: 104,},{name: "江西",value: 36,},{name: "湖北",value: 1052,},{name: "广西",value: 33,},{name: "甘肃",value: 7,},{name: "山西",value: 9,},{name: "内蒙古",value: 7,},{name: "陕西",value: 22,},{name: "吉林",value: 4,},{name: "福建",value: 18,},{name: "贵州",value: 5,},{name: "广东",value: 98,},{name: "青海",value: 1,},{name: "西藏",value: 0,},{name: "四川",value: 44,},{name: "宁夏",value: 4,},{name: "海南",value: 22,},{name: "台湾",value: 3,},{name: "香港",value: 5,},{name: "澳门",value: 5,},],},],};var count = 0;var timeTicket = null;var dataLength = option.series[0].data.length;timeTicket && clearInterval(timeTicket);timeTicket = setInterval(function () {myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: count % dataLength,});myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: count % dataLength,});count++;}, 1000);myChart.setOption(option);//移入myChart.on("mouseover", function (params) {clearInterval(timeTicket);myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: params.dataIndex,});myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: params.dataIndex,});});//移出myChart.on("mouseout", function () {timeTicket && clearInterval(timeTicket);timeTicket = setInterval(function () {myChart.dispatchAction({type: "downplay",seriesIndex: 0,});myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: count % dataLength,});myChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: count % dataLength,});count++;}, 1000);});},randomData() {return Math.round(Math.random() * 1000);},},
};
</script>

这是基本上就可以了

代码引用于: https://gallery.echartsjs.com/editor.html?c=xr1W9m5LOG

github 源码: https://github.com/lujingshao/a

echars实现中国地图省级自动切换相关推荐

Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
echarts——实现中国地图+世界地图的切换——技能提升
之前写过一篇文章,是关于中国地图的展示. vue+echarts.js 实现中国地图--根据数值表示省份的深浅--技能提升:http://t.csdn.cn/rfQGl 最后实现的效果如下图所示: 今 ...
vue echarts 中国地图省级联动+散点图（各省json文件及china.js）
最近用echarts 做个散点图,且省级联动,效果图如下: 1.安装echarts cnpm install echarts --save 2.引入echarts.中国地图及省份地图json impo ...
echart+react实现中国地图点击切换省份（使用react hooks封装echart）
实现效果如下: 一.echart封装(react hooks) 实现容器大小发生改变,重新绘制在页面卸载时清理监听以及清除图例实现代码如下 //index.js import React, { u ...
echart地图加载中国地图，可切换省市地图
前提:vue文件 (代码并不完整,仅参考) echartMapData是个全局对象,在index.html被引入参考代码 <script src="./js/echarts/echa ...
Vue + echart 实现中国地图和省市地图（可切换省份
vue + echart 实现中国地图和省市地图(可切换省份) - 伏沙金 - 博客园
echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步: 生成中国地图第二步: 定义点击事件根据反参生成省级地图所需要的参数第三步: 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts ...
echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图
先上效果图, 鼠标放上去时的效果,如下图所示: 点击进入到的省级地图,如下图所示: 中国地图,鼠标放上去时的代码: myChart.on('mouseover', function (params) ...
学习路之gis--如何获取中国地图的shp文件（含省级
1.下载地图json文件网址:DataV.GeoAtlas地理小工具系列 http://datav.aliyun.com/tools/atlas/index.html 2.点击下载文件也可以用ge ...

echars实现中国地图省级自动切换

echars实现中国地图省级自动切换相关推荐

最新文章

热门文章

echars实现中国地图 省级自动切换

echars实现中国地图 省级自动切换相关推荐

最新文章

热门文章

echars实现中国地图省级自动切换

echars实现中国地图省级自动切换相关推荐