echarts地图下钻打点案例

<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"></div>

import echarts from 'echarts'
import '../../../static/js/china.js' // 引入中国地图数据
import {provinceJson,cityArr} from './mapjson.js'//相关省市json
export default {name: 'chinaMapList',title: '营业点中国地图分布',components: {},data() {return {chinaJson: null,cityArr: cityArr,option: null,data: [],province: '',provinceJson:provinceJson}},methods: {chinaJsonLoad() {this.$get('/static/json/china.json').then(res => {this.chinaJson = JSON.parse(JSON.stringify(res.data))setTimeout(()=>{this.loadChina3()},100)})},//展示中国地图showChina() {this.province = ''this.getMapRefionDataLoad()//调用对应数量},//展示城市showCity(zhName, pyName) {this.$get('/static/json/province/' + pyName + '.json').then(res => {this.chinaJson = res.datathis.getMapCityDataLoad(zhName)//调用数量})},//全部加载getMapRefionDataLoad() {this.$get(this.GLOBAL.API_GET_MAP_TABLE2).then(res => {res.data.data.forEach(item => {item['name'] = item['省份']item['amountAll'] = item['总体销售额']item['value'] = item['渠道数量']item['selfAmount'] = item['自有产品销售额']})this.data = res.data.datathis.chinaJsonLoad()})},//城市加载getMapCityDataLoad(zhName) {console.log('市')this.province = zhNameif (zhName == "北京市" || zhName == "天津市" || zhName == "重庆市" || zhName == "上海市") {let params = {province: zhName,city: zhName}let url = this.GLOBAL.API_GET_MAP_COUNTYthis.$get(url, params).then(res => {res.data.data.forEach(item => {item['name'] = item['区县']item['amountAll'] = item['总体销售额']item['value'] = item['渠道数量']item['selfAmount'] = item['自有产品销售额']})this.data = res.data.data                  this.loadChina3(zhName)})} else {let params = {province: zhName}let url = this.GLOBAL.API_GET_MAP_CITYthis.$get(url, params).then(res => {res.data.data.forEach(item => {item['name'] = item['城市']item['amountAll'] = item['总体销售额']item['value'] = item['渠道数量']item['selfAmount'] = item['自有产品销售额']})this.data = res.data.data              this.loadChina3(zhName)})}},//营业点分布echarts地图loadChina3(cityNameValue='china') {console.log(cityNameValue)var myChart = echarts.init(document.getElementById('china3'));echarts.registerMap(cityNameValue||'china', this.chinaJson)// 注册地图   let _this=this;var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = _this.provinceJson[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),value1: data[i].value,amountAll:data[i].amountAll,selfAmount:data[i].selfAmount});}}return res;};let option = null;    option = {backgroundColor: '#0b0518',//地图背景色title: {text: '营业点分布图',left: '40%',top: 'top',textStyle: {color: '#fff'}},tooltip: {trigger: 'item',formatter: function (a) {return `${a['name']}</br>渠道数量: ${a['data'] && a['data'].value1&&a['data'].value1.toString().replace(/\B(?=(?:\d{3})+\b)/g, ',') || 0} 个</br>总体销售额: ${a['data'] && a['data'].amountAll&&a['data'].amountAll.toString().replace(/\B(?=(?:\d{3})+\b)/g, ',') || 0} 万元 </br>自有产品销售额: ${a['data'] && a['data'].selfAmount&& a['data'].selfAmount.toString().replace(/\B(?=(?:\d{3})+\b)/g, ',') || 0} 万元`}},geo: {map: cityNameValue||'china',roam: true, //是否开启平游或缩放label: {normal: {//是否展示省市区文字展示show: false// show: true},emphasis: {show: false},           },itemStyle: {normal: {areaColor: '#363c47',borderColor: '#454950'},emphasis: {areaColor: '#363c47',}}},series: [{type: 'effectScatter',mapType: cityNameValue ||'china',coordinateSystem: 'geo', data: convertData(this.data),symbolSize: function (val) {if(val[2]<400){return 4}else{return val[2] / 150;}},encode: {value: 2},label: {formatter: '{b}',position: 'right',show: false},itemStyle: {color: '#0271d0'},emphasis: {label: {show: false}}}]};myChart.clear()myChart.setOption(option, true);myChart.off('click')myChart.on('click', (param) => {var cityName = param.name;// 城市中文名// 查找是否有对应城市，有则加载城市for (var i = 0, len = this.cityArr[0].length; i < len; i++) {if (cityName == this.cityArr[0][i]) {this.showCity(this.cityArr[0][i], this.cityArr[1][i]);return;}}//没有找到，返回中国地图this.showChina()});var myZoommyChart.on('georoam',function(params){console.log(params)})}},mounted() {this.getMapRefionDataLoad()},activated() {this.getMapRefionDataLoad()}
}

echarts地图下钻打点案例相关推荐

echarts 地图下钻功能
vue 实现 echarts 地图下钻安装效果图 echarts 安装 npm install echarts // 引入echarts 中国地图 import echarts from 'ech ...
echarts地图下钻与回钻
最近在项目实际业务中为了更清晰的展示各省市的数据,使用echarts实现了地图的下钻和回钻.里面加了实际业务,所以代码有些冗余. import * as echarts from 'echarts' ...
vue+echarts地图下钻(全国-省-市)
本文中使用的数据为行政区编码json数据,大家自行下载.(本人超级菜鸟一枚,逻辑比较混乱,记录一下以免以后遇到相似功能忘记怎么写,也希望能帮到需要实现同样功能的人) 地图资源: 整体思路:1.先注册全 ...
echarts地图下钻（vue）
效果 <template><div><h3>地图下钻</h3><button class="button" @click=&q ...
echarts 地图下钻到市到区
echarts的地图展示,并且带有下钻到下级市区 vue.js里面操作echarts //vue里面修改模板 <template><div id="china_map_bo ...
echarts地图下钻
最近做的项目用到了echarts的地图,默认为市区地图,需要实现从市区下钻到县级,首先我用的是echarts3.0实现的地图钻取功能. 要实现的效果为图(市区可切换,点市区还可以钻取) 1.第一步去e ...
echarts地图下钻效果
先看效果图,第二张是因为数据差距过大导致.可调再看代码 import * as echarts from 'echarts'; import mapJson from '../utils/福州市.j ...
Echarts地图下钻，省钻到市，市钻到县，县钻到乡
由于经费问题,只写了省钻到市,市钻到县与县钻到乡在本文中根本没有出现. 先贴两张图,第1张是全国地图: 第2张是点击河北后的河北省地图: 步骤详解: 1. 引入js const echarts = r ...
echarts实现地图下钻
公司的新项目需要写这样的地图,还要能两级下钻到省,下面是我写好了的样子,我今天就是复一下盘: 如何用echarts显示地图首先需要下载map的Json数据,我放到这里:mapJson 然后使用ech ...

echarts地图下钻打点案例

echarts地图下钻打点案例相关推荐

最新文章

热门文章