echarts同时带有颜色和光圈的中国地图

<template><div id="wrp"><div id="chart_example"></div></div>
</template><script>
// 首先要 cnpm install echarts
import echarts from 'echarts'
import 'echarts/map/js/china.js'export default {mounted() {let myChart = echarts.init(document.getElementById('chart_example'))var data = [{ name: '新疆制作中心', value: [299, 749, 769] }, // 三个值分别代表 总值，已完成，待完成，点的大小是按照第一个值渲染的{ name: '高雄研发中心', value: [120, 100, 30] },{ name: '北京总部', value: [300, 30, 20] },{ name: '广州分公司', value: [1000, 2000, 20] },{ name: '上海分公司', value: [30, 30, 30] }]let dataListF = {北京: '116.405285,39.904989',天津: '117.190182,39.125596',上海: '121.472644,31.231706',重庆: '106.504962,29.533155',河北: '114.502461,38.045474',河南: '113.665412,34.757975',云南: '102.712251,25.040609',辽宁: '123.429096,41.796767',黑龙江: '126.642464,45.756967',湖南: '112.982279,28.19409',安徽: '117.283042,31.86119',山东: '117.000923,36.675807',新疆: '87.617733,43.792818',江苏: '118.767413,32.041544',浙江: '120.153576,30.287459',江西: '115.892151,28.676493',湖北: '114.298572,30.584355',广西: '108.320004,22.82402',甘肃: '103.823557,36.058039',山西: '112.549248,37.857014',内蒙古: '111.670801,40.818311',陕西: '108.948024,34.263161',吉林: '125.3245,43.886841',福建: '119.306239,26.075302',贵州: '106.713478,26.578343',广东: '113.280637,23.125178',青海: '101.778916,36.623178',西藏: '91.132212,29.660361',四川: '104.065735,30.659462',宁夏: '106.278179,38.46637',海南: '110.33119,20.031971',台湾: '121.509062,25.044332',香港: '114.173355,22.320048',澳门: '113.54909,22.198951'}var geoCoordMap = {新疆制作中心: [87.617733, 43.792818], //  经，纬高雄研发中心: [121.509062, 25.044332],北京总部: [116.405285, 39.904989],广州分公司: [113.280637, 23.125178],上海分公司: [121.472644, 31.231706],广州制作中心: [113.280637, 23.125178],郑州制作中心: [113.665412, 34.757975],山东制作中心: [117.000923, 36.675807],沈阳制作中心: [123.429096, 41.796767],北京中心: [116.405285, 39.904989],成都制作中心: [104.065735, 30.659462],武汉制作中心: [114.298572, 30.584355]}var yData = []for (var i = 0; i < data.length; i++) {yData.push(data[i].name)}var dataList = [{name: '北京',value: 53},{name: '天津',value: 38},{name: '上海',value: 46},{name: '重庆',value: 36},{name: '河北',value: 4500},{name: '河南',value: 132},{name: '云南',value: 116},{name: '辽宁',value: 243},{name: '黑龙江',value: 3000},{name: '湖南',value: 224},{name: '安徽',value: 330},{name: '山东',value: 300},{name: '新疆',value: 10},{name: '江苏',value: 390},{name: '浙江',value: 35},{name: '江西',value: 20},{name: '湖北',value: 210},{name: '广西',value: 300},{name: '甘肃',value: 120},{name: '山西',value: 320},{name: '内蒙古',value: 350},{name: '陕西',value: 250},{name: '吉林',value: 450},{name: '福建',value: 280},{name: '贵州',value: 188},{name: '广东',value: 300},{name: '青海',value: 600},{name: '西藏',value: 0},{name: '四川',value: 330},{name: '宁夏',value: 700},{name: '海南',value: 1500},{name: '台湾',value: 100},{name: '香港',value: 300},{name: '澳门',value: 2000}]var convertData = function(data) {var res = []for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name]if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),id:1})}}return res}let option = {tooltip: {padding: 0,trigger: 'item',enterable: true,transitionDuration: 1,textStyle: {color: '#000',decoration: 'none'},formatter: function(params) {console.log(params)let tipHtml = ''if (params.data.id) {//  在这里加了一个判断在，只有划过点的时候才会显示提示框，要不然的话经过省份也会显示提示框tipHtml ='<div style="width:280px;height:180px;background:rgba(0, 0, 0, 0.3);border:1px solid none">' +'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid gray;padding:0 20px;box-sizing:border-box;">' +'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;border-radius:40px;">' +'</i>' +'<span style="margin-left:10px;color:#fff;font-size:16px;">' +params.name +'</span>' +'</div>' +'<div style="padding:20px">' +'<p style="color:#fff;font-size:12px;">' +'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +'</i>' +'总量：' +'<span style="color:#11ee7d;margin:0 6px;">' +params.value[2] +'</span>' +'个' +'</p>' +'<p style="color:#fff;font-size:12px;">' +'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +'</i>' +'已完成量：' +'<span style="color:#f48225;margin:0 6px;">' +params.value[3] +'</span>' +'个' +'</p>' +'<p style="color:#fff;font-size:12px;">' +'<i style="display:inline-block;width:10px;height:10px;background:#16d6ff;border-radius:40px;margin:0 8px">' +'</i>' +'待完成量：' +'<span style="color:#f4e925;margin:0 6px;">' +params.value[4] +'</span>' +'个' +'</p>' +'</div>' +'</div>'return tipHtml}}},visualMap: {min: 0,max: 5000,calculable: true,inRange: {color: ['#50a3ba', '#eac736', '#d94e5d']},textStyle: {color: '#fff'}},grid: {right: 10,top: 80,bottom: 30,width: '20%'},geo: {map: 'china',roam: false, //  是否可以放大缩小zoom: 1.23,label: {normal: {show: true,fontSize: '10',color: 'rgba(0,0,0,0.7)'}}// itemStyle: {//   normal: {//     borderColor: 'rgba(0, 0, 0, 0.2)'//   },//   //划过省份显示的颜色//   emphasis: {//     areaColor: '',//     shadowOffsetX: 0,//     shadowOffsetY: 0,//     shadowBlur: 20,//     borderWidth: 0,//     shadowColor: 'rgba(0, 0, 0, 0.5)'//   }// }},series: [//显示点{type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function(val) {if (val[2] === 0) {return 6}return val[2] / 10 //根据已完成量来做大小的设置},hoverAnimation: true,//地图上显示打印中心label: {normal: {formatter: '{b}',position: 'right',// show: true,textStyle: {fontSize: 12,fontWeight: 'bold',color: '#ff8c71'}},emphasis: {show: true}},itemStyle: {normal: {color: 'red', //点的颜色shadowBlur: 10,shadowColor: '#ff8c71' //阴影颜色}}},//点加上光圈{name: '点',type: 'scatter',coordinateSystem: 'geo',zlevel: 6},//大光圈   没有数据的中心不加光圈{type: 'effectScatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function(val) {if (val[2] === 0) {return 0}return val[2] / 10 //根据已完成量来做大小的设置},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,itemStyle: {normal: {color: '#ff8c71',shadowBlur: 10,shadowColor: '#ff8c71'}},zlevel: 1},{name: '信息量',type: 'map',geoIndex: 0,data: dataList}]}myChart.setOption(option)},watch: {$route: {handler(route) {console.log(this.$route.matched)},immediate: true}}
}
</script><style scoped>
/* #wrp {width: 100%;height: 1000px;
} */
#chart_example {width: 100%;height: 700px;border: 1px solid red;margin: 0 auto;
}
</style>

echarts同时带有颜色和光圈的中国地图相关推荐

[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区
最近发生了很多事情,去到了一个新环境学习.但是不论在哪里,我都需要不忘初心,坚持做自己喜欢的事情,在CSDN写博客.教学.爱娜.生活等等. 这篇文章主要是通过Echarts可视化介绍入 ...
vue中使用echarts中国地图
一效果图二上代码封装的完整的地图组件,里面注释了很多就不解释了 <template><div class="mapContent"><div r ...
vue+echarts中国地图+省市级地图（全程教学，你也可以）
echarts+vue中国地图,点击进入省级地图 VUE+Echarts+省市地图钻取(简洁版,超详细) 以上两篇来自站内,是本文的主要参考来源. 首先上才艺首先需要引入 echarts 包 npm ...
【echarts实现】中国地图世界地图
打开一个用 vue 创建的新项目安装 npm install --save echarts@4.x echars实现中国和世界地图需要引入地图资源需引入地图的话下载的echarts版本就要低于5. ...
使用Echarts完成对中国地图的绘制
目录前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结前言我们在使用代码绘画地图的时候通常 ...
vue如何用echarts画可缩放的中国地图（省会飞行图）
1.创建一个容器之后设计统计图的地理坐标组件与图表类型(事先请保证已经导入了echart依赖包) <template><div ref="ChinaMap"> ...
前端jq/vue echarts中国地图的实现
一.jquery项目实现echarts中国地图 1.引入相关资源文件 jquery.echarts 等 <script src="https://cdn.bootcdn.net/aja ...
vue+echarts中国地图数据可视化展示
1.效果展示 2.步骤: 2.1.在main.js文件中加入 //引入echartsimport * as echarts from "echarts";Vue.prototype ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
echarts省市区id（区域编码）实现地图下钻点击（data赋值自定义属性值，geojson信息获取）
致新的一年:不知不觉已经是2023年,祝新的一年大展宏图(兔),前途(兔)似锦,今年梦想实现! 正文: 接触echarts也有很长一段时间了,最近有个很常见的需求,实现省市区下钻,高亮一些有数据的区域 ...

echarts同时带有颜色和光圈的中国地图

echarts同时带有颜色和光圈的中国地图相关推荐

最新文章

热门文章