vue+echarts中国地图数据可视化展示

1、效果展示

2、步骤：

2.1、在main.js文件中加入

//引入echartsimport * as echarts from "echarts";Vue.prototype.$echarts = echarts;

2.2、然后创建一个新的文件 chinaMap.vue

<template><!-- 注意，这里必须设置宽高，并且宽高不能都设置为100%，否则显示的是空白 --><div id="china_map" style="width: 100%; height: 450px;"></div>
</template>;<script>import * as echarts from "echarts";import china from "../../components/china.json";  //中国地图echarts.registerMap("china", china);export default {data() {return {MapDataList: [{name: "黑龙江",value: 44,perf: "1%",},{name: "湖南",value: 23,perf: "70%",},{name: "云南",value: 68,perf: "70%",},{name: "安徽",value: 66,perf: "60%",}]};  },mounted() {this.setMapData();this.$nextTick(() => {// if (this.chinachart == null) {this.setMapData();// }});},methods: {// 地图setMapData() {// 初始化echarts实例 #D8E9FDthis.chinachart = echarts.init(document.getElementById("china_map"));// 进行相关配置this.chartOption = {tooltip: { // 鼠标移到图里面的浮动提示框// formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatterformatter(params, ticket, callback) {// params.data 就是series配置项中的data数据遍历let localValue, perf, downloadSpeep, usability, point;if (params.data) {localValue = params.data.value;perf = params.data.perf;downloadSpeep = params.data.downloadSpeep;usability = params.data.usability;point = params.data.point;} else {// 为了防止没有定义数据的时候报错写的localValue = 0;perf = 0;}let htmlStr = `<div style='font-size:18px;'> ${params.name}</div><p style='text-align:left;margin-top:-4px;'>项目数量：${localValue}<br/>占比：${perf}<br/></p>`;return htmlStr;},backgroundColor: "#ff7f50", //提示标签背景颜色textStyle: { color: "#fff" }, //提示标签字体颜色padding: [5, 10, 0, 10],  // 设置上下的内边距为 5,0，左右的内边距为 10},visualMap: {  show: true,bottom: 20,left: 100,// left: 50, top: '30%', right: 0, bottom: 0,  //定位的左上角以及右下角分别所对应的经纬度text: ["200", "0"],min: 0,itemHeight: 200,  //图形的高度，即长条的高度。color: ['#ee6666',//红色'#fc8452',//橙色'#fac858',//黄色'#9a60b4',//紫色'#ea7ccc',//淡紫'#3ba272',//绿色'#91cc75',//浅绿'#5470c6',//蓝色'#73c0de',//淡蓝]},    geo: {  // 地理坐标系组件用于地图的绘制// geo配置详解： https://echarts.baidu.com/option.html#geomap: "china", // 表示中国地图// roam: true, // 是否开启鼠标缩放和平移漫游zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）label: {show: true},emphasis: {  // 地图区域的多边形 图形样式。borderColor: "#ffffff",//未选中的状态areaColor: "#D8E9FD", //背景颜色label: {show: true, //显示名称},itemStyle: {  //选中的状态// 高亮状态下的多边形和标签样式shadowBlur: 20,shadowColor: "rgba(0, 0, 0, 0.5)",borderColor: "#fff",areaColor: "#DA3A3A",},},},series: [{name: "地图", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）type: "map",geoIndex: 0,label: {show: true,},// 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）data: this.MapDataList,},],};// 使用刚指定的配置项和数据显示地图数据this.chinachart.setOption(this.chartOption);},}}
</script>

2.4、把data.json文件放到components目录下面

2.5、把map文件夹放到node_modules\echarts目录下面

3、文件链接：链接：https://pan.baidu.com/s/1p6HQepob0HMZKpyRaCdvbA?pwd=6666
提取码：6666

vue+echarts中国地图数据可视化展示相关推荐

ECharts在线编辑中国地图数据可视化展示
1.打开ECharts网站输入网址:https://echarts.apache.org/examples/zh/editor.html?c=map-china&theme=light 2. ...
基于echarts 24种数据可视化展示，填充数据就可用，动手能力强的还可以DIY（演示地址+下载地址）
基于echarts 24种数据可视化展示,填充数据就可用,动手能力强的还可以DIY(演示地址+下载地址) 前言演示地址下载地址 Demo示例(部分) 1.总览 2.物流信息展示 3.车辆综合管控平 ...
前端jq/vue echarts中国地图的实现
一.jquery项目实现echarts中国地图 1.引入相关资源文件 jquery.echarts 等 <script src="https://cdn.bootcdn.net/aja ...
获取省市区geoJson数据（精确到县、镇）用于echarts实现地图数据可视化
写在前面本文着重介绍关于获取数据的部分,如果数据处理好了,不会使用echarts将地图绘制出来,可以参考echarts的官方文档,或去搜寻大佬们的教程,或者另外问我,我再写一份我自己理解的关于ech ...
vue+echarts中国地图+省市级地图（全程教学，你也可以）
echarts+vue中国地图,点击进入省级地图 VUE+Echarts+省市地图钻取(简洁版,超详细) 以上两篇来自站内,是本文的主要参考来源. 首先上才艺首先需要引入 echarts 包 npm ...
（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
回顾作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...
echarts学习——（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
一个基于Vue前端框架和第三方图表库Echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合.以及一些功能模块的设计及代码 ...
ECharts实现中国地图数据可视化
项目中数据可视化已经太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts:一般都有折线图.柱形图.饼形图,还有常见的地图,今天就地图来说一下--中国地图. 1.首先官 ...
vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...

vue+echarts中国地图数据可视化展示

vue+echarts中国地图数据可视化展示相关推荐

最新文章

热门文章