uni-app 使用 echarts 显示湖南地图

1、安装依赖

npm install echarts --save

2、页面设置

<template><view id="map" style="height:345px;width:345px;"></view>
</template>

3、引入文件

import echarts from "echarts";
import 'echarts/map/js/province/hunan.js';

4、地图的基础配置

this.option = {title: {text: '',subtext: '',x: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',x: 'left',data: ['']},dataRange: {min: 0,max: 1000,x: 'left',y: 'bottom',text: ['max', 'min'],calculable: true},toolbox: {show: false,orient: 'vertical',x: 'right',y: 'center',feature: {mark: {show: true},dataView: {show: true,readOnly: false},restore: {show: true},saveAsImage: {show: true}}},roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},series: [{name: '',type: 'map',mapType: '湖南',roam: false,itemStyle: {normal: {label: {show: true}},emphasis: {label: {show: true}}},data:  [{name: '长沙市', value: 20},{name:'益阳市',value: 340},{name:'岳阳市',value: 430},{name:'娄底市',value: 423},{name:'湘潭市',value: 223},{name:'张家界市',value: 120},{name:'湘西土家族苗族自治州',value: 323},{name:'常德市',value: 230},{name:'怀化市',value: 423},{name:'株洲市',value: 330},{name:'衡阳市',value: 423},{name:'邵阳市',value: 45},{name:'永州市',value: 55},{name:'郴州市',value: 65},]}]}

5、初始化地图

去echarts官网下载主题放到一个静态js中，引入进来即可更换主题

mapEchartsInit() {// var myChart = echarts.init(this.$refs.map);   echarts 画图报错 this.dom.getContext is not a function;  原因:因为在初始化echarts的时候，echarts.js规定只能使用dom原生方法获取标签，即document.getElementById('map')var myChart = echarts.init(document.getElementById('map'), 'shine');  //shine  主题名称myChart.setOption(this.options, true);
},

6、加载地图

this.$nextTick(() => {this.mapEchartsInit();
});

7、效果

uni-app 使用 echarts 显示湖南地图相关推荐

Winform Echarts 显示百度地图的用法（3）
1,用Echarts 显示百度地图的用法(2)写一个 baidu.html 2,winform页面放一个WebBrowser控件,用来放地图的html页面 3,winform 加载时将WebBrow ...
微信小程序使用echarts显示全国地图
首先可以看一下echarts官方的实例也可以直接使用我参照了官方实例的方法: 1.下载echarts小程序组件并放置到具体项目下载地址将项目拉到本地之后,找到文件中的 ec-canvas 文件夹 ...
调用百度 Echarts 显示重庆市地图
因为 Echarts 官方不再提供地图数据的下载,在这里保存一份,供日后使用,重庆地图数据的 JSON 文件在 CSDN 上下载. <!DOCTYPE html> <html sty ...
echarts显示中国地图
下面介绍一个方法如何用echarts画一个中国地图,如图项目引入echarts以后,在页面创建canvas标签 <div ref="chartone" ></d ...
vue用 echarts 显示区域地图并用不同颜色显示每个区域
认定了一个女孩就要好好的珍惜对待她,人生不容辜负,你必须要更加努力 .加油骚年. 用 echarts 做动态中国区域地图或者全国地图效果如下做这些必须先引入echarts 怎么引入的自己 ...
echarts显示北京地图(鼠标放入区域变色)
前期准备工作 json文件:下载 jquery.min.js(右键另存为):下载 echarts.min.js:下载 <!DOCTYPE html> <html><hea ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
Echarts显示自定义标注点/地图map引导线
Echarts显示自定义标注点/地图map引导线先贴效果.这里实现了 1.地图上县区名的显示,鼠标移入显示相应的项目数(如下图东源县) 2.地图上增加自定义地图(这里增加了没有的高新区&市辖 ...

uni-app 使用 echarts 显示湖南地图

uni-app 使用 echarts 显示湖南地图相关推荐

最新文章

热门文章