居于vue的echart云南地图

1、HTML部分

<el-col :span="24"><div><div ref="map" class="teaEnterpriseMap" style="margin: -20px 0 0 10px;"></div></div>
</el-col>

2、JS部分

<script>
import '../../../node_modules/echarts/map/js/province/yunnan.js'
import echarts from 'echarts'
export default {data () {return {mapOption: {title: {},tooltip: {trigger: 'item'},dataRange: {min: 0,max: 50,x: 'left',y: 'bottom',text: ['高', '低'],calculable: true,inRange: {color: ['lightskyblue', '#ffdb5c', '#F56C6C']},textStyle: {color: '#fff'}},toolbox: {show: true,orient: 'vertical',x: 'right',y: 'center',feature: {mark: {show: true},dataView: {show: false,readOnly: false},restore: {show: false},saveAsImage: {show: false}}},roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},series: []}}},mounted () {// 加载云南地图this.mapEchartsInit()},methods: {// 云南地图mapEchartsInit () {const myChart = echarts.init(this.$refs.map)myChart.setOption(this.mapOption, true)},getCountGroupByRegisterCity () {this.$http.get(`/enterprise/basicenterprise/countGroupByRegisterCity`).then(({ data: res }) => {if (res.code !== 0) {return this.$message.error(res.msg)}const resData = res.dataconst seriesData = []for (var i in resData) {seriesData.push({ name: resData[i].cityName, value: resData[i].num })}const series = [{name: '茶企数量',type: 'map',mapType: '云南',roam: false,label: {// show: true,normal: {textStyle: {fontSize: 12,color: '#999'}}},itemStyle: {normal: {label: {show: true}},emphasis: {areaColor: '#ffff01',label: {show: true,textStyle: {color: '#F56C6C'}}}},data: seriesData}]this.mapOption.series = seriesthis.mapEchartsInit()}).catch(() => {})}}
}
</script>

居于vue的echart云南地图相关推荐

Echart + 百度地图实现区域聚合（Vue版）
Echart + 百度地图实现区域聚合(Vue版) 百度地图的聚合很简单,但是根据区域聚合怎么实现呢?结合Echart的百度地图怎么实现区域聚合呢? 单独玩过Echart,也单独用过百度地图,但是两个 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
VUE中使用百度地图BaiduMap
VUE中使用百度地图BaiduMap 以前在html页中使用了echart,做了很多图表,也集成了百度地图,效果很好.最近,开始研究vue加 .net core的框架,所以也想把echart和百度地图 ...
echart中国地图，多地图案例
1.echart,在网页中加载中国地图的方法,直接附上html代码 <!DOCTYPE html> <head><meta charset="utf-8&quo ...
基于echart青海省地图资源的修改体验
基于echart青海省地图资源的修改体验最近老用echart做首页展示地图,本来都还很正常,却遇到了奇怪的甲方需求. 在青海省下8个同级行政区内,把唐古拉山镇部分独立划分出来和这8个平级. 什么也不 ...
vue 页面使用百度地图
前言 vue 3.x 百度地图JavaScript API GL v1.0 百度地图的源码编辑器:http://lbs.baidu.com/jsdemo.htm#webgl0_0 本文代码在百度地图的 ...
Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...

居于vue的echart云南地图

居于vue的echart云南地图相关推荐

最新文章

热门文章