echarts版中国地图

Echarts实现中国版地图

项目中下载echarts；
```
npm i echarts --save
```

全局注册echarts；（main.js中全局引入）

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

建立echarts组件（数据部门）

     tooltip: {padding: 0,enterable: true,transitionDuration: 0,textStyle: {color: '#000',decoration: 'none',},},geo: {map: 'china',show: true,roam: false,zoom: 1.3, //当前视角的缩放比例aspectScale: 0.86,layoutCenter: ["50%", "50%"], //地图位置layoutSize: '100%',itemStyle: {normal: {shadowColor: 'rgba(80,225,247,0.6)',shadowOffsetX: 1,shadowOffsetY: 5,opacity: 1,shadowBlur: 10},emphasis: {areaColor: 'rgba(0,243,255,1)',}},regions: [{name: '南海诸岛',itemStyle: {areaColor: 'rgb(17,37,76)',borderColor: 'rgb(17,37,76)',normal: {opacity: 0,label: {show: false,color: "#009cc9",}},},label: {show: false,color: '#FFFFFF',fontSize: 12,},}],},series: [{name: '散点',type: 'effectScatter',coordinateSystem: 'geo',// 显示的点data: this.convertData(data),// 气泡大小symbolSize: 9,symbol: 'circle',label: {//   显示位置normal: {show: false},emphasis: {show: false}},showEffectOn: 'render',itemStyle: {normal: {color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0,color: 'rgba(12,46,80,0.1)'},{offset: 0.8,color: 'rgba(14,245,209,0.2)'}, {offset: 1,color: 'rgba(14,245,209,1)'}],// 圆点圈的显示global: false // 缺省为 false},}},},// 常规地图{type: 'map',map: 'china',geoIndex: 1,aspectScale: 0.85,layoutCenter: ["50%", "50%"], //地图位置layoutSize: '100%',showLegendSymbol: false, // 存在legend时显示selectedMode: "false",zoom: 1.3, //当前视角的缩放比例// roam: true, //是否开启平游或缩放scaleLimit: { //滚轮缩放的极限控制min: 1,max: 2},tooltip: {show: false,},label: {normal: {show: false},emphasis: {show: false}},roam: false,itemStyle: {normal: {areaColor: {type: 'radial',x: 0.5,y: 0.5,r: .8,colorStops: [{offset: .26, color: 'rgba(16,27,63,1)' // 0% 处的颜色}, {offset: 1, color: 'rgba(21,73,121,1)'// 100% 处的颜色}],global: false // 缺省为 false},borderColor: 'rgba(0,243,255,0.4)',borderWidth: 2.5,},emphasis: {areaColor: 'rgb(16,27,63)',label: {color: "#fff"}}},},]

echarts中存在省份弹框,可以在tooltip信息中加入

 // 弹层extraCssText: 'white-space:pre-wrap',formatter: function (params) {let nameX = params.namereturn `<div class="modeChardimg123"><div class="modeChardimg"><h3>${nameX}</h3><div class="proName"><span>项目金额：</span><span>4000万</span></div><div class="promName"><span>项目概况：</span><span>建设内容分9个单元:门诊医技综合楼、病房楼、传染病专科楼、精神病专科楼、公共服务中心楼……</span></div></div></div>`}

项目中如果需要封装的echarts，下方提供封装方式（仅供参考）：

<template><div :id="chartId" :style="{ width: width, height: height }" class="chart"></div>
</template><script>
import * as echarts from 'echarts'
import "../js/china" // 中文导入
export default {name: "MyChart",props: {chartId: {type: String,required: true},width: {type: String,default: "500px"},height: {type: String,default: "500px"},chartOptions: {type: Object,required: true},confimDisabled: {type: Boolean,default: false,}},mounted() {this.$nextTick(() => {this.initChart(this.chartId, this.chartOptions);})},methods: {initChart(id, data) {let _that = this;let myChart = document.getElementById(id)this.chartLine = echarts.init(myChart);this.chartLine.setOption(data)window.addEventListener('resize', function () {_that.chartLine.resize()})if (this.confimDisabled) {let that = thislet chart = echarts.init(document.getElementById(id))chart.on('legendselectchanged', function (obj) {that.$emit("exportClick", obj);})}},},watch: {data: {handler(newValue, old) {this.initData(this.chartId, newValue, old)},deep: true}}
};
</script>
<style scoped>
.chart {display: inline-block;
}
</style>

echarts版中国地图相关推荐

echarts实现中国地图和各省市地图
echarts实现中国地图我会把china.js和各省市的js以及json上传资源,有需要的可以下载首先引入echarts.js和china.js <!DOCTYPE html> &l ...
echarts实现中国地图各省背景根据数值大小变化的方法
很多人不清楚中国地图要怎么实现,其实 echarts 已经为我们封装好了,只要我们配置好各省数据就可以快捷实现了. 首先我们先来实现中国地图: 中国地图的实现 (1)引入 echarts 及中国地图 ...
Echarts实现——中国地图
Echarts实现--中国地图如下图: 使用Echarts进行地图绘制展示的时候,需要china.json: 举例在vue的项目中可以通过cnpm install echarts --save安装E ...
echarts 绘制中国地图（中英文转换）
echarts 绘制中国地图 1.引入echarts npm install echarts import echarts from 'echarts' 2.引入地图china.js(网上自行搜索下载 ...
Echarts关于中国地图的china.js文件下载
原文出处:https://blog.csdn.net/weixin_36413887/article/details/80019625 早上用到Echarts的中国地图map时,需要用到china.j ...
echarts：中国地图实现
安装 npm install echarts --save 把chinaMap对应的js文件放到echarts目录下面,保证引用路径的正确性. 直接用npm install的map文件似乎用不了,可以 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
Echarts实现中国地图完整示例
Echarts实现中国地图完整示例及js文件有问题大家可以留言或私信我公司是有一个产品,销量遍布全国. 近期要求制作一个***中国地图来显示所有省份的销量***,要有一个***滚动显示每个省的销量 ...
vue 引入json地图_vue中echarts引入中国地图的案例
如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...

echarts版中国地图

Echarts实现中国版地图

echarts版中国地图相关推荐

最新文章

热门文章