|
@@ -8,10 +8,9 @@
|
|
import _ from 'lodash';
|
|
import _ from 'lodash';
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
import echarts from 'echarts/lib/echarts';
|
|
import echarts from 'echarts/lib/echarts';
|
|
-import 'echarts/map/js/china.js';
|
|
|
|
import './js/mapjs';
|
|
import './js/mapjs';
|
|
import * as citys from './js/datajs';
|
|
import * as citys from './js/datajs';
|
|
-import cJson from 'echarts/map/json/china';
|
|
|
|
|
|
+import lib from './js/code';
|
|
import 'echarts/lib/component/title';
|
|
import 'echarts/lib/component/title';
|
|
import 'echarts/lib/component/legend';
|
|
import 'echarts/lib/component/legend';
|
|
import 'echarts/lib/component/toolbox';
|
|
import 'echarts/lib/component/toolbox';
|
|
@@ -25,34 +24,52 @@ export default {
|
|
data: () => {
|
|
data: () => {
|
|
return {
|
|
return {
|
|
myChart: null,
|
|
myChart: null,
|
|
|
|
+ hasChart: false,
|
|
|
|
+ rpic:
|
|
|
|
+ 'path://M660.24 337.63H384.06V270.2a31.71 31.71 0 0 0-47.57-27.46L159.07 345.16a31.72 31.72 0 0 0 0 54.94l177.42 102.' +
|
|
|
|
+ '43a31.72 31.72 0 0 0 47.57-27.47v-67.43h276.18c102.31 0 185.54 83.23 185.54 185.54s-83.23 185.54-185.54 185.54H273.83a35' +
|
|
|
|
+ ' 35 0 1 0 0 70h386.41a255.54 255.54 0 1 0 0-511.08z',
|
|
|
|
+ nlib: [],
|
|
};
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
- this.init('china');
|
|
|
|
|
|
+ this.init();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
...mapActions(['query']),
|
|
...mapActions(['query']),
|
|
- async init(name) {
|
|
|
|
- console.log(cJson);
|
|
|
|
- let res = await this.query();
|
|
|
|
- let city = {};
|
|
|
|
- let jilinJson = _.get(citys, 'jilinJson');
|
|
|
|
- console.log(jilinJson);
|
|
|
|
- if (this.$checkRes(res)) {
|
|
|
|
- city = jilinJson.features.map(i => {
|
|
|
|
- let object = {};
|
|
|
|
- object.name = _.get(i.properties, 'name');
|
|
|
|
- let result = res.data.filter(f => f.place == object.name);
|
|
|
|
- object.value = result.length;
|
|
|
|
- return object;
|
|
|
|
- });
|
|
|
|
|
|
+ async init(object) {
|
|
|
|
+ if (this.hasChart) {
|
|
|
|
+ this.myChart.dispose();
|
|
|
|
+ this.hasChart = false;
|
|
|
|
+ }
|
|
|
|
+ let dataJson;
|
|
|
|
+ let name;
|
|
|
|
+ let feature = {};
|
|
|
|
+ if (!object) {
|
|
|
|
+ dataJson = citys.china;
|
|
|
|
+ name = 'china';
|
|
|
|
+ } else {
|
|
|
|
+ dataJson = _.get(citys, `${object.py}`);
|
|
|
|
+ name = object.py;
|
|
|
|
+ feature = {
|
|
|
|
+ myTool1: {
|
|
|
|
+ show: true,
|
|
|
|
+ title: '返回',
|
|
|
|
+ icon: this.rpic,
|
|
|
|
+ onclick: () => this.init(),
|
|
|
|
+ },
|
|
|
|
+ };
|
|
}
|
|
}
|
|
- let newJson = this.setPos(_.cloneDeep(jilinJson));
|
|
|
|
|
|
+ let newJson = this.setPos(_.cloneDeep(dataJson));
|
|
|
|
+ let mapData = await this.getData(object, newJson.features);
|
|
let option = {
|
|
let option = {
|
|
title: {
|
|
title: {
|
|
text: '展会分布',
|
|
text: '展会分布',
|
|
left: 'center',
|
|
left: 'center',
|
|
},
|
|
},
|
|
|
|
+ toolbox: {
|
|
|
|
+ feature: feature,
|
|
|
|
+ },
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
trigger: 'item',
|
|
},
|
|
},
|
|
@@ -86,7 +103,8 @@ export default {
|
|
},
|
|
},
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
- name: name == 'china' ? '中国' : name, //吉林省
|
|
|
|
|
|
+ id: name,
|
|
|
|
+ name: '展会数量', //吉林省
|
|
type: 'map',
|
|
type: 'map',
|
|
map: name, //jilin,china
|
|
map: name, //jilin,china
|
|
emphasis: {
|
|
emphasis: {
|
|
@@ -98,28 +116,22 @@ export default {
|
|
textFixed: {
|
|
textFixed: {
|
|
Alaska: [20, 120],
|
|
Alaska: [20, 120],
|
|
},
|
|
},
|
|
- data: [],
|
|
|
|
- // 全国地图数据:{ name: '辽宁', value: 1555 },
|
|
|
|
- // { name: '黑龙江', value: 1555 },
|
|
|
|
- // { name: '吉林', value: 1555 }
|
|
|
|
- // 城市
|
|
|
|
|
|
+ data: mapData,
|
|
},
|
|
},
|
|
],
|
|
],
|
|
};
|
|
};
|
|
//用$echarts是因为上面注册使用的 Vue.prototype.$echarts
|
|
//用$echarts是因为上面注册使用的 Vue.prototype.$echarts
|
|
- echarts.registerMap(name, name == 'china' ? cJson : jilinJson);
|
|
|
|
|
|
+ echarts.registerMap(name, newJson);
|
|
this.myChart = echarts.init(document.getElementById('chartMap'));
|
|
this.myChart = echarts.init(document.getElementById('chartMap'));
|
|
this.myChart.setOption(option);
|
|
this.myChart.setOption(option);
|
|
this.myChart.hideLoading();
|
|
this.myChart.hideLoading();
|
|
|
|
+ this.hasChart = true;
|
|
this.myChart.on('click', params => {
|
|
this.myChart.on('click', params => {
|
|
- console.log(params);
|
|
|
|
- let name = params.name;
|
|
|
|
- let res = cJson.features.find(f => {
|
|
|
|
- let o = _.get(f, 'properties');
|
|
|
|
- if (o) return o.name == name;
|
|
|
|
- else return false;
|
|
|
|
- });
|
|
|
|
- console.log(res);
|
|
|
|
|
|
+ if (params.seriesId == 'china') {
|
|
|
|
+ let name = params.name;
|
|
|
|
+ let res = lib.find(f => f.name == name);
|
|
|
|
+ this.init(res);
|
|
|
|
+ }
|
|
});
|
|
});
|
|
},
|
|
},
|
|
setPos(data) {
|
|
setPos(data) {
|
|
@@ -137,9 +149,24 @@ export default {
|
|
});
|
|
});
|
|
return data;
|
|
return data;
|
|
},
|
|
},
|
|
- setData(city, data) {
|
|
|
|
- console.log(city);
|
|
|
|
- console.log(data);
|
|
|
|
|
|
+ async getData(data, json) {
|
|
|
|
+ let query = {};
|
|
|
|
+ let rd;
|
|
|
|
+ if (data) query.province = data.code;
|
|
|
|
+ let res = await this.query(query);
|
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
|
+ rd = json.map(i => {
|
|
|
|
+ let object = {};
|
|
|
|
+ object.name = _.get(i.properties, 'name');
|
|
|
|
+ let result = res.data.filter(f => {
|
|
|
|
+ if (!data) return f.province == i.id;
|
|
|
|
+ else return f.place == i.id;
|
|
|
|
+ });
|
|
|
|
+ object.value = result.length;
|
|
|
|
+ return object;
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ return rd;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|