vue使用echarts绘制地图

由于vue-echarts网上能找到的资源太少了，鼓捣了好久地图也没出来，最后还是放弃了，还是用echarts吧。直接贴代码

<template><div class=""><div id="map" :style="{ height: '800px', width: '100%' }" ref="myEchart"></div></div>
</template><script>import * as echarts from 'echarts';const henanJson = require("../../../public/henan.json") export default {name: 'dp',data(){return{}},mounted(){this.init();},methods:{init(data) {let myChart = echarts.init(document.getElementById('map'));echarts.registerMap('henan', henanJson);let option = {title: {text: '地图',left: 'center'},tooltip: {trigger: 'item',formatter:  function(params) {if(!params.value){return '该地区暂无访问量';}return params.seriesName+'<br />'+params.name+'：'+params.value+'次'},confine: true},visualMap: {min: 0,max: 100,text: ['高', '低'],realtime: false,calculable: true,itemWidth:10,itemHeight: 70,inRange: {color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],}},series: [{name: '',type: 'map',// zoom: 1.4,label: {show: false},mapType: 'henan', // 自定义扩展图表类型itemStyle: {// normal: {label: {show: true}},emphasis: {label: {show: true}},normal:{label: { show: true,textStyle: {color: '#444'}},}},data: [],}]};// option.title.text = data.title;// option.visualMap.max = data.max;// option.series[0].name = data.name;// option.series[0].data = data.data;myChart.setOption(option);window.addEventListener('resize', function () {myChart.resize();});}}}
</script>

效果图

vue使用echarts绘制地图相关推荐

vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
Vue 使用 Apache Echarts 绘制地图（拓展篇）
前言根据大家的私信.留言,还是决定对地图这块的东西进行拓展讲解一下,希望大家能够真正了解.使用.绘制自己想要的地图效果,让大家彻底弄懂Echarts地图,涉及绘制原理.行政区划.SVG地图.地图打点 ...
用Vue和ECharts绘制问卷统计结果
用Vue和ECharts绘制问卷统计结果问卷设置了单选题.多选题以及文本题三中类型,分别使用了饼图.条形图.文本框来显示结果. 首先在html文件中,给div绑定一个"question-i ...
vue使用maptalks绘制地图教程
vue使用maptalks绘制地图教程一.加载最简单的地图二.加载更多地图样式版本: vue:2.7.14 vue-cli:3.2.1 maptalks:1.0.0 一.加载最简单的地图在gi ...
vue+openlayer+echarts 在地图点位上添加柱状图
** vue+openlayer+echarts 给地图点位添加柱状图 ** 重点在方法addColumnChart()里,三步实现在网上百度了很多相关文章,最终都无疾而终,只能硬着头皮自己摸索,好 ...
vue中用echarts 绘制geo 中国地图
前言由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
Vue中使用echarts绘制地图，以及只显示南海问题
下载echarts依赖下载依赖我想大家都会:cnpm / npm install echartsyar add echarts typescript项目 npm install @types/ech ...
vue 中 echarts 中国地图
我们先来看一下效果说明:echarts 版本 "echarts": "^4.2.0-rc.2", 版本高的话,node_model 里面没有 map ...
echarts 绘制地图设置其中某些板块高亮（颜色）
问题描述:当我们用echarts绘制了一个地图,可能需要某个位置高亮. 如下图: 其实有个属性,当我们传入的data数据里面加一行就可以改变它是否选中了.具体代码如下. 当selected:true ...

vue使用echarts绘制地图

vue使用echarts绘制地图相关推荐

最新文章

热门文章