|
|
|
@ -4,496 +4,495 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
// import { |
|
|
|
// raiseOldWholeData, |
|
|
|
// exceptionSituation, |
|
|
|
// raiseOldmanSituation, |
|
|
|
// weekDayCompare, |
|
|
|
// getMapDataTongji, |
|
|
|
// bindFuWuLiang |
|
|
|
// } from '@/api/tongji/kanBanJuJiaYangLao' |
|
|
|
import * as echarts from 'echarts' |
|
|
|
require('echarts/theme/macarons') // echarts theme |
|
|
|
import resize from './mixins/resize' |
|
|
|
// import xt_data from '@/assets/河北省/邢台市/geojson.json' |
|
|
|
import xt_data from '@/assets/全国/geojson.json' |
|
|
|
export default { |
|
|
|
mixins: [resize], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
chartDatas2: [], |
|
|
|
chart: null, |
|
|
|
startCharts: null, |
|
|
|
charPie3currentIndex: 0, |
|
|
|
dataLen: 0 |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
chartData: { |
|
|
|
deep: true, |
|
|
|
handler(val) { |
|
|
|
this.setOptions(val) |
|
|
|
// import { |
|
|
|
// raiseOldWholeData, |
|
|
|
// exceptionSituation, |
|
|
|
// raiseOldmanSituation, |
|
|
|
// weekDayCompare, |
|
|
|
// getMapDataTongji, |
|
|
|
// bindFuWuLiang |
|
|
|
// } from '@/api/tongji/kanBanJuJiaYangLao' |
|
|
|
import * as echarts from 'echarts' |
|
|
|
require('echarts/theme/macarons') // echarts theme |
|
|
|
import resize from './mixins/resize' |
|
|
|
// import xt_data from '@/assets/河北省/邢台市/geojson.json' |
|
|
|
import xt_data from '@/assets/全国/geojson.json' |
|
|
|
export default { |
|
|
|
mixins: [resize], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
chartDatas2: [], |
|
|
|
chart: null, |
|
|
|
startCharts: null, |
|
|
|
charPie3currentIndex: 0, |
|
|
|
dataLen: 0 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.initChart() |
|
|
|
}) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
if (!this.chart) { |
|
|
|
return |
|
|
|
} |
|
|
|
if (this.startCharts) { |
|
|
|
clearInterval(this.startCharts) |
|
|
|
} |
|
|
|
this.chart.dispose() |
|
|
|
this.chart = null |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initChart() { |
|
|
|
// getMapDataTongji().then(response => { |
|
|
|
// if (response.code === 20000) { |
|
|
|
// if ( |
|
|
|
// response.data !== null && |
|
|
|
// response.data !== '' && |
|
|
|
// response.data !== undefined |
|
|
|
// ) { |
|
|
|
// this.countyData = [] |
|
|
|
// for (var i = 0; i < response.data.length; i++) { |
|
|
|
// var county = response.data[i] |
|
|
|
// this.countyData.push({ |
|
|
|
// name: county.title, |
|
|
|
// value: county.departmentCount, |
|
|
|
// county: county |
|
|
|
// }) |
|
|
|
// console.log('chartDatas2', this.chartDatas2) |
|
|
|
// if (county.title === '邢东新区') { |
|
|
|
// this.chartDatas2.push({ |
|
|
|
// name: '邢东新区', |
|
|
|
// value: [ |
|
|
|
// 114.597268, |
|
|
|
// 37.096124, |
|
|
|
// county.departmentCount, |
|
|
|
// county.personCount |
|
|
|
// ] |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// if (county.title === '经济开发区') { |
|
|
|
// this.chartDatas2.push({ |
|
|
|
// name: '经济开发区', |
|
|
|
// value: [ |
|
|
|
// 114.565733, |
|
|
|
// 37.06169, |
|
|
|
// county.departmentCount, |
|
|
|
// county.personCount |
|
|
|
// ] |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// } |
|
|
|
// console.log('chartDatas2aaaa', this.chartDatas2) |
|
|
|
var _self = this |
|
|
|
const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置 |
|
|
|
this.chart = myChart |
|
|
|
window.onresize = myChart.resize |
|
|
|
myChart.showLoading() |
|
|
|
var option = {} |
|
|
|
console.log(JSON.stringify(this.countyData)) |
|
|
|
this.countyData = [ |
|
|
|
{ 'name': '北京', 'value': '48', 'county': { 'title': '北京', 'jwd': '114.52153 , 38.04831', 'personCount': '22831', 'departmentCount': '48', 'ad': '110000' }}, |
|
|
|
|
|
|
|
|
|
|
|
{ 'name': '邢东新区', 'value': '4', 'county': { 'title': '邢东新区', 'jwd': '114.597268,37.096124', 'personCount': '806', 'departmentCount': '4', 'areaCode': '130591' }}] |
|
|
|
// { 'name': '襄都区', 'value': '48', 'county': { 'title': '襄都区', 'jwd': '114.492019,37.061614', 'personCount': '22831', 'departmentCount': '48', 'areaCode': '130502' }}, |
|
|
|
// { 'name': '信都区', 'value': '131', 'county': { 'title': '信都区', 'jwd': '114.468435,37.059882', 'personCount': '12487', 'departmentCount': '131', 'areaCode': '130503' }}, |
|
|
|
// { 'name': '任泽区', 'value': '67', 'county': { 'title': '任泽区', 'jwd': '114.671936,37.120983', 'personCount': '10179', 'departmentCount': '67', 'areaCode': '130505' }}, |
|
|
|
// { 'name': '南和区', 'value': '16', 'county': { 'title': '南和区', 'jwd': '114.683762,37.005041', 'personCount': '3909', 'departmentCount': '16', 'areaCode': '130506' }}, |
|
|
|
// { 'name': '临城县', 'value': '30', 'county': { 'title': '临城县', 'jwd': '114.506873,37.444009', 'personCount': '4023', 'departmentCount': '18', 'areaCode': '130522' }}, |
|
|
|
// { 'name': '内丘县', 'value': '29', 'county': { 'title': '内丘县', 'jwd': '114.511523,37.287663', 'personCount': '6724', 'departmentCount': '19', 'areaCode': '130523' }}, |
|
|
|
// { 'name': '柏乡县', 'value': '70', 'county': { 'title': '柏乡县', 'jwd': '114.693382,37.483596', 'personCount': '1625', 'departmentCount': '7', 'areaCode': '130524' }}, |
|
|
|
// { 'name': '隆尧县', 'value': '10', 'county': { 'title': '隆尧县', 'jwd': '114.776348,37.350925', 'personCount': '44038', 'departmentCount': '10', 'areaCode': '130525' }}, |
|
|
|
// { 'name': '宁晋县', 'value': '71', 'county': { 'title': '宁晋县', 'jwd': '114.921027,37.618956', 'personCount': '13381', 'departmentCount': '71', 'areaCode': '130528' }}, |
|
|
|
// { 'name': '巨鹿县', 'value': '55', 'county': { 'title': '巨鹿县', 'jwd': '115.038782,37.21768', 'personCount': '8627', 'departmentCount': '55', 'areaCode': '130529' }}, |
|
|
|
// { 'name': '新河县', 'value': '8', 'county': { 'title': '新河县', 'jwd': '115.247537,37.526216', 'personCount': '212', 'departmentCount': '8', 'areaCode': '130530' }}, |
|
|
|
// { 'name': '广宗县', 'value': '27', 'county': { 'title': '广宗县', 'jwd': '115.142797,37.075548', 'personCount': '4903', 'departmentCount': '27', 'areaCode': '130531' }}, |
|
|
|
// { 'name': '平乡县', 'value': '39', 'county': { 'title': '平乡县', 'jwd': '115.029218,37.069404', 'personCount': '1884', 'departmentCount': '39', 'areaCode': '130532' }}, |
|
|
|
// { 'name': '威县', 'value': '14', 'county': { 'title': '威县', 'jwd': '115.272749,36.983272', 'personCount': '4831', 'departmentCount': '14', 'areaCode': '130533' }}, |
|
|
|
// { 'name': '清河县', 'value': '25', 'county': { 'title': '清河县', 'jwd': '115.668999,37.059991', 'personCount': '6240', 'departmentCount': '25', 'areaCode': '130534' }}, |
|
|
|
// { 'name': '临西县', 'value': '7', 'county': { 'title': '临西县', 'jwd': '115.498684,36.8642', 'personCount': '1903', 'departmentCount': '7', 'areaCode': '130535' }}, |
|
|
|
// { 'name': '经济开发区', 'value': '22', 'county': { 'title': '经济开发区', 'jwd': '114.565733,37.061690', 'personCount': '24184', 'departmentCount': '22', 'areaCode': '130571' }}, |
|
|
|
// { 'name': '南宫市', 'value': '24', 'county': { 'title': '南宫市', 'jwd': '115.398102,37.359668', 'personCount': '8200', 'departmentCount': '24', 'areaCode': '130581' }}, |
|
|
|
// { 'name': '沙河市', 'value': '23', 'county': { 'title': '沙河市', 'jwd': '114.504902,36.861903', 'personCount': '4745', 'departmentCount': '23', 'areaCode': '130582' }}, |
|
|
|
// { 'name': '邢东新区', 'value': '4', 'county': { 'title': '邢东新区', 'jwd': '114.597268,37.096124', 'personCount': '806', 'departmentCount': '4', 'areaCode': '130591' }}] |
|
|
|
echarts.registerMap('xingtai', xt_data, {}) |
|
|
|
option = { |
|
|
|
title: { |
|
|
|
text: '全国仓库分布图', |
|
|
|
// subtext: 'Data from www.census.gov', |
|
|
|
left: 'center', |
|
|
|
textStyle: { |
|
|
|
fontSize: 24, |
|
|
|
color: '#026193' |
|
|
|
// fontWeight: 'bolder' // 字体加粗 |
|
|
|
}, |
|
|
|
show: true |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
alwaysShowContent: true, |
|
|
|
textStyle: { |
|
|
|
fontSize: 12, |
|
|
|
color: '#ccc' |
|
|
|
}, |
|
|
|
trigger: 'item', |
|
|
|
backgroundColor: '#242429cc', |
|
|
|
formatter: function(params) { |
|
|
|
const value = (params.value + '').split('.') |
|
|
|
var valueStr = value[0].replace( |
|
|
|
/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, |
|
|
|
'$1,' |
|
|
|
) |
|
|
|
var personCount = 0 |
|
|
|
if (params.componentSubType === 'scatter') { |
|
|
|
// debugger |
|
|
|
valueStr = params.data.value[2] |
|
|
|
personCount = params.data.value[3] |
|
|
|
} else { |
|
|
|
personCount = params.data.county.personCount |
|
|
|
} |
|
|
|
return ( |
|
|
|
params.name + |
|
|
|
'<br/>老人数量: ' + |
|
|
|
personCount + |
|
|
|
'人<br/>' + |
|
|
|
'机构数量：' + |
|
|
|
valueStr + |
|
|
|
'个' |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
// geo: { |
|
|
|
// map: 'xingtai', |
|
|
|
// aspectScale: 0.75, |
|
|
|
// layoutCenter: ['50%', '50.5%'], |
|
|
|
// layoutSize: '102%', |
|
|
|
// silent: true, |
|
|
|
// roam: false, |
|
|
|
// z: 0, |
|
|
|
// itemStyle: { |
|
|
|
// normal: { |
|
|
|
// areaColor: '#9db8d2', |
|
|
|
// shadowColor: 'rgba(0, 0, 0, 1)', |
|
|
|
// shadowBlur: 0, |
|
|
|
// shadowOffsetX: 0, |
|
|
|
// shadowOffsetY: 10, |
|
|
|
// borderColor: 'rgba(0, 0, 0, 0.7)', |
|
|
|
// borderWidth: 0.5 |
|
|
|
// }, |
|
|
|
// emphasis: { |
|
|
|
// areaColor: '#2AB8FF', |
|
|
|
// borderWidth: 1, |
|
|
|
// color: 'green', |
|
|
|
// label: { |
|
|
|
// show: false |
|
|
|
// } |
|
|
|
// } |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
chartData: { |
|
|
|
deep: true, |
|
|
|
handler(val) { |
|
|
|
this.setOptions(val) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
this.initChart() |
|
|
|
}) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
if (!this.chart) { |
|
|
|
return |
|
|
|
} |
|
|
|
if (this.startCharts) { |
|
|
|
clearInterval(this.startCharts) |
|
|
|
} |
|
|
|
this.chart.dispose() |
|
|
|
this.chart = null |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initChart() { |
|
|
|
// getMapDataTongji().then(response => { |
|
|
|
// if (response.code === 20000) { |
|
|
|
// if ( |
|
|
|
// response.data !== null && |
|
|
|
// response.data !== '' && |
|
|
|
// response.data !== undefined |
|
|
|
// ) { |
|
|
|
// this.countyData = [] |
|
|
|
// for (var i = 0; i < response.data.length; i++) { |
|
|
|
// var county = response.data[i] |
|
|
|
// this.countyData.push({ |
|
|
|
// name: county.title, |
|
|
|
// value: county.departmentCount, |
|
|
|
// county: county |
|
|
|
// }) |
|
|
|
// console.log('chartDatas2', this.chartDatas2) |
|
|
|
// if (county.title === '邢东新区') { |
|
|
|
// this.chartDatas2.push({ |
|
|
|
// name: '邢东新区', |
|
|
|
// value: [ |
|
|
|
// 114.597268, |
|
|
|
// 37.096124, |
|
|
|
// county.departmentCount, |
|
|
|
// county.personCount |
|
|
|
// ] |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// if (county.title === '经济开发区') { |
|
|
|
// this.chartDatas2.push({ |
|
|
|
// name: '经济开发区', |
|
|
|
// value: [ |
|
|
|
// 114.565733, |
|
|
|
// 37.06169, |
|
|
|
// county.departmentCount, |
|
|
|
// county.personCount |
|
|
|
// ] |
|
|
|
// }) |
|
|
|
// } |
|
|
|
// }, |
|
|
|
geo: { |
|
|
|
show: true, |
|
|
|
map: 'xingtai', |
|
|
|
roam: false, |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
show: false |
|
|
|
// } |
|
|
|
// console.log('chartDatas2aaaa', this.chartDatas2) |
|
|
|
var _self = this |
|
|
|
const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置 |
|
|
|
this.chart = myChart |
|
|
|
window.onresize = myChart.resize |
|
|
|
myChart.showLoading() |
|
|
|
var option = {} |
|
|
|
console.log(JSON.stringify(this.countyData)) |
|
|
|
this.countyData = [ |
|
|
|
{ 'name': '北京市', 'value': '20', 'county': { 'title': '北京市' } }, |
|
|
|
{ 'name': '甘肃省', 'value': '40', 'county': { 'title': '甘肃省' } }, |
|
|
|
{ 'name': '四川省', 'value': '100', 'county': { 'title': '四川省' } }, |
|
|
|
{ 'name': '山西省', 'value': '200', 'county': { 'title': '山西省' } }, |
|
|
|
{ 'name': '辽宁省', 'value': '48', 'county': { 'title': '辽宁省' } }, |
|
|
|
{ 'name': '吉林省', 'value': '268', 'county': { 'title': '吉林省' } }, |
|
|
|
{ 'name': '陕西省', 'value': '369', 'county': { 'title': '陕西省' } }, |
|
|
|
{ 'name': '河北省', 'value': '500', 'county': { 'title': '河北省' } }, |
|
|
|
{ 'name': '山东省', 'value': '10', 'county': { 'title': '山东省' } }, |
|
|
|
{ 'name': '天津市', 'value': '356', 'county': { 'title': '天津市' } }, |
|
|
|
{ 'name': '河南省', 'value': '479', 'county': { 'title': '河南省' } }, |
|
|
|
{ 'name': '湖北省', 'value': '285', 'county': { 'title': '湖北省' } }, |
|
|
|
{ 'name': '重庆市', 'value': '190', 'county': { 'title': '重庆市' } }, |
|
|
|
{ 'name': '贵州省', 'value': '560', 'county': { 'title': '贵州省' } }, |
|
|
|
{ 'name': '福建省', 'value': '80', 'county': { 'title': '福建省' } }, |
|
|
|
{ 'name': '湖南省', 'value': '159', 'county': { 'title': '湖南省' } }, |
|
|
|
{ 'name': '江西省', 'value': '259', 'county': { 'title': '江西省' } }, |
|
|
|
{ 'name': '广东省', 'value': '359', 'county': { 'title': '广东省' } }, |
|
|
|
{ 'name': '海南省', 'value': '459', 'county': { 'title': '海南省' } }, |
|
|
|
{ 'name': '台湾省', 'value': '559', 'county': { 'title': '台湾省' } }, |
|
|
|
{ 'name': '江苏省', 'value': '80', 'county': { 'title': '江苏省' } }, |
|
|
|
{ 'name': '安徽省', 'value': '480', 'county': { 'title': '安徽省' } }, |
|
|
|
{ 'name': '上海市', 'value': '90', 'county': { 'title': '上海市' } }, |
|
|
|
{ 'name': '浙江省', 'value': '418', 'county': { 'title': '浙江省' } }, |
|
|
|
{ 'name': '云南省', 'value': '131', 'county': { 'title': '云南省' } }, |
|
|
|
{ 'name': '青海省', 'value': '4', 'county': { 'title': '青海省' } }, |
|
|
|
{ 'name': '广西壮族自治区', 'value': '428', 'county': { 'title': '广西壮族自治区' } }, |
|
|
|
{ 'name': '宁夏回族自治区', 'value': '248', 'county': { 'title': '宁夏回族自治区' } }, |
|
|
|
{ 'name': '西藏自治区', 'value': '138', 'county': { 'title': '西藏自治区' } }, |
|
|
|
{ 'name': '内蒙古自治区', 'value': '318', 'county': { 'title': '内蒙古自治区' } }, |
|
|
|
{ 'name': '新疆维吾尔自治区', 'value': '381', 'county': { 'title': '新疆维吾尔自治区' } }, |
|
|
|
{ 'name': '黑龙江省', 'value': '48', 'county': { 'title': '黑龙江省' } }, |
|
|
|
|
|
|
|
] |
|
|
|
echarts.registerMap('xingtai', xt_data, {}) |
|
|
|
option = { |
|
|
|
title: { |
|
|
|
text: '全国仓库分布图', |
|
|
|
// subtext: 'Data from www.census.gov', |
|
|
|
left: 'center', |
|
|
|
textStyle: { |
|
|
|
fontSize: 24, |
|
|
|
color: '#026193' |
|
|
|
// fontWeight: 'bolder' // 字体加粗 |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
show: true |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
areaColor: '#3c8dbc', // 没有值得时候颜色 |
|
|
|
borderColor: '#097bba' |
|
|
|
tooltip: { |
|
|
|
alwaysShowContent: true, |
|
|
|
textStyle: { |
|
|
|
fontSize: 12, |
|
|
|
color: '#ccc' |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
areaColor: '#fbd456' // 鼠标滑过选中的颜色 |
|
|
|
trigger: 'item', |
|
|
|
backgroundColor: '#242429cc', |
|
|
|
formatter: function (params) { |
|
|
|
const value = (params.value + '').split('.') |
|
|
|
var valueStr = value[0].replace( |
|
|
|
/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, |
|
|
|
'$1,' |
|
|
|
) |
|
|
|
return ( |
|
|
|
params.name + |
|
|
|
'<br/>仓库数量: ' + |
|
|
|
valueStr + |
|
|
|
'个' |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
visualMap: { |
|
|
|
show: false, |
|
|
|
left: 'right', |
|
|
|
bottom: 20, |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
text: ['高', '低'], |
|
|
|
calculable: true, |
|
|
|
textStyle: { |
|
|
|
color: '#fff' |
|
|
|
}, |
|
|
|
inRange: { |
|
|
|
color: ['#f37b1d', '#1e6ff0', '#6e41c7', '#34b157'], |
|
|
|
symbolSize: [30, 100] |
|
|
|
} |
|
|
|
}, |
|
|
|
toolbox: { |
|
|
|
show: false, |
|
|
|
// orient: 'vertical', |
|
|
|
left: 'left', |
|
|
|
top: 'top', |
|
|
|
feature: { |
|
|
|
dataView: { readOnly: false }, |
|
|
|
restore: {}, |
|
|
|
saveAsImage: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
textStyle: { |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
// { |
|
|
|
// name: '机构数量', |
|
|
|
// type: 'map', |
|
|
|
// roam: true, |
|
|
|
// geo: { |
|
|
|
// map: 'xingtai', |
|
|
|
// emphasis: { |
|
|
|
// label: { |
|
|
|
// show: true, |
|
|
|
// aspectScale: 0.75, |
|
|
|
// layoutCenter: ['50%', '50.5%'], |
|
|
|
// layoutSize: '102%', |
|
|
|
// silent: true, |
|
|
|
// roam: false, |
|
|
|
// z: 0, |
|
|
|
// itemStyle: { |
|
|
|
// normal: { |
|
|
|
// areaColor: '#9db8d2', |
|
|
|
// shadowColor: 'rgba(0, 0, 0, 1)', |
|
|
|
// shadowBlur: 0, |
|
|
|
// shadowOffsetX: 0, |
|
|
|
// shadowOffsetY: 10, |
|
|
|
// borderColor: 'rgba(0, 0, 0, 0.7)', |
|
|
|
// borderWidth: 0.5 |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// label: { |
|
|
|
// show: true, |
|
|
|
// // formatter: '{b}:{@score}人' |
|
|
|
// }, |
|
|
|
// data: this.countyData, |
|
|
|
// emphasis: { |
|
|
|
// areaColor: '#2AB8FF', |
|
|
|
// borderWidth: 1, |
|
|
|
// color: 'green', |
|
|
|
// label: { |
|
|
|
// show: false |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
{ |
|
|
|
name: '机构数量', |
|
|
|
type: 'map', |
|
|
|
roam: false, |
|
|
|
geo: { |
|
|
|
show: true, |
|
|
|
map: 'xingtai', |
|
|
|
roam: false, |
|
|
|
label: { |
|
|
|
show: false |
|
|
|
// formatter: '{b}:{@score}人' |
|
|
|
normal: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
}, |
|
|
|
data: this.countyData, |
|
|
|
emphasis: { |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
areaColor: '#3c8dbc', // 没有值得时候颜色 |
|
|
|
borderColor: '#097bba' |
|
|
|
}, |
|
|
|
emphasis: { |
|
|
|
areaColor: '#fbd456' // 鼠标滑过选中的颜色 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
visualMap: { |
|
|
|
show: false, |
|
|
|
left: 'right', |
|
|
|
bottom: 20, |
|
|
|
min: 0, |
|
|
|
max: 100, |
|
|
|
text: ['高', '低'], |
|
|
|
calculable: true, |
|
|
|
textStyle: { |
|
|
|
color: '#fff' |
|
|
|
}, |
|
|
|
inRange: { |
|
|
|
color: ['#f37b1d', '#1e6ff0', '#6e41c7', '#34b157'], |
|
|
|
symbolSize: [30, 100] |
|
|
|
} |
|
|
|
}, |
|
|
|
toolbox: { |
|
|
|
show: false, |
|
|
|
// orient: 'vertical', |
|
|
|
left: 'left', |
|
|
|
top: 'top', |
|
|
|
feature: { |
|
|
|
dataView: { readOnly: false }, |
|
|
|
restore: {}, |
|
|
|
saveAsImage: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
textStyle: { |
|
|
|
fontSize: 16 |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
// { |
|
|
|
// name: '机构数量', |
|
|
|
// type: 'map', |
|
|
|
// roam: true, |
|
|
|
// map: 'xingtai', |
|
|
|
// emphasis: { |
|
|
|
// label: { |
|
|
|
// show: true, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
// label: { |
|
|
|
// show: true, |
|
|
|
// // formatter: '{b}:{@score}人' |
|
|
|
// }, |
|
|
|
// data: this.countyData, |
|
|
|
// }, |
|
|
|
{ |
|
|
|
name: '机构数量', |
|
|
|
type: 'map', |
|
|
|
roam: false, |
|
|
|
map: 'xingtai', |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
fontSize: 20, |
|
|
|
fontWeight: 'bolder' |
|
|
|
show: false |
|
|
|
// formatter: '{b}:{@score}人' |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
// borderType: 'solid', |
|
|
|
// borderWidth: 3, |
|
|
|
// borderColor: '#e83e11', |
|
|
|
shadowBlur: 20, |
|
|
|
shadowOffsetX: 5, |
|
|
|
shadowOffsetY: 5 |
|
|
|
data: this.countyData, |
|
|
|
emphasis: { |
|
|
|
label: { |
|
|
|
show: true, |
|
|
|
fontSize: 20, |
|
|
|
fontWeight: 'bolder' |
|
|
|
}, |
|
|
|
itemStyle: { |
|
|
|
// borderType: 'solid', |
|
|
|
// borderWidth: 3, |
|
|
|
// borderColor: '#e83e11', |
|
|
|
shadowBlur: 20, |
|
|
|
shadowOffsetX: 5, |
|
|
|
shadowOffsetY: 5 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// { |
|
|
|
// // 小图标圆圈 |
|
|
|
// symbol: 'circle', |
|
|
|
// symbolSize: 20, |
|
|
|
// label: { |
|
|
|
// normal: { |
|
|
|
// formatter: '{b}', |
|
|
|
// position: 'right', |
|
|
|
// show: true |
|
|
|
// // textStyle: { |
|
|
|
// // color: '#f00', |
|
|
|
// // fontSize: 12 |
|
|
|
// // }, |
|
|
|
// }, |
|
|
|
// emphasis: { |
|
|
|
// show: true |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// itemStyle: { |
|
|
|
// color: '#fa3008', |
|
|
|
// opacity: 1, |
|
|
|
// borderColor: '#9603ea', |
|
|
|
// borderWidth: 1 |
|
|
|
// { |
|
|
|
// // 小图标圆圈 |
|
|
|
// symbol: 'circle', |
|
|
|
// symbolSize: 20, |
|
|
|
// label: { |
|
|
|
// normal: { |
|
|
|
// formatter: '{b}', |
|
|
|
// position: 'right', |
|
|
|
// show: true |
|
|
|
// // textStyle: { |
|
|
|
// // color: '#f00', |
|
|
|
// // fontSize: 12 |
|
|
|
// // }, |
|
|
|
// }, |
|
|
|
// emphasis: { |
|
|
|
// show: true |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// itemStyle: { |
|
|
|
// color: '#fa3008', |
|
|
|
// opacity: 1, |
|
|
|
// borderColor: '#9603ea', |
|
|
|
// borderWidth: 1 |
|
|
|
|
|
|
|
// // normal: { |
|
|
|
// // opacity : 1, |
|
|
|
// // borderColor: '#fa3008', |
|
|
|
// // borderWidth: 1, |
|
|
|
// // color: '#ff' |
|
|
|
// // } |
|
|
|
// }, |
|
|
|
// name: 'light', |
|
|
|
// type: 'scatter', |
|
|
|
// coordinateSystem: 'geo', |
|
|
|
// data: this.chartDatas2 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// // 小图标老人数量 |
|
|
|
// name: 'Top 5', |
|
|
|
// type: 'scatter', |
|
|
|
// coordinateSystem: 'geo', |
|
|
|
// // symbol: 'pin', |
|
|
|
// // symbolSize: [50, 50], |
|
|
|
// symbolOffset: [0, -12], |
|
|
|
// symbol: 'image://home/markertu3.png', |
|
|
|
// symbolSize: [30, 30], |
|
|
|
// label: { |
|
|
|
// normal: { |
|
|
|
// show: false, |
|
|
|
// textStyle: { |
|
|
|
// color: '#ff0', |
|
|
|
// fontSize: 12 |
|
|
|
// }, |
|
|
|
// formatter(value) { |
|
|
|
// return value.data.value[2] // |
|
|
|
// // return value.data.areaCount// |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// itemStyle: { |
|
|
|
// normal: { |
|
|
|
// opacity: 1, |
|
|
|
// borderColor: '#fa3008', |
|
|
|
// borderWidth: 1, |
|
|
|
// color: '#d800ff' |
|
|
|
// // color: '#D8BC37' // 标志颜色 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// data: this.chartDatas2, |
|
|
|
// showEffectOn: 'render', |
|
|
|
// rippleEffect: { |
|
|
|
// brushType: 'stroke' |
|
|
|
// }, |
|
|
|
// hoverAnimation: true, |
|
|
|
// zlevel: 1 |
|
|
|
// } |
|
|
|
// { |
|
|
|
// data: [ |
|
|
|
// { name: '宁晋县', value: [114.921027, 37.618956, 56] }, |
|
|
|
// { name: '襄都区', value: 0 }, |
|
|
|
// { name: '信都区', value: 0 }, |
|
|
|
// { name: '任泽区', value: 0 }, |
|
|
|
// { name: '南和区', value: 0 }, |
|
|
|
// { name: '临城县', value: 0 }, |
|
|
|
// { name: '内丘县', value: 0 }, |
|
|
|
// { name: '柏乡县', value: 0 }, |
|
|
|
// { name: '隆尧县', value: 0 }, |
|
|
|
// { name: '巨鹿县', value: 0 }, |
|
|
|
// { name: '新河县', value: 0 }, |
|
|
|
// { name: '广宗县', value: 0 }, |
|
|
|
// { name: '平乡县', value: 0 }, |
|
|
|
// { name: '威县', value: 0 }, |
|
|
|
// { name: '清河县', value: 0 }, |
|
|
|
// { name: '临西县', value: 0 }, |
|
|
|
// { name: '南宫市', value: 0 }, |
|
|
|
// { name: '沙河市', value: 0 } |
|
|
|
// ], |
|
|
|
// name: '点', |
|
|
|
// type: 'effectScatter', |
|
|
|
// coordinateSystem: 'geo', |
|
|
|
// // symbol: 'pin', // 气泡 |
|
|
|
// symbolSize: 20, |
|
|
|
// label: { |
|
|
|
// normal: { |
|
|
|
// show: true, |
|
|
|
// formatter: function(params) { |
|
|
|
// return params.data.value[2] |
|
|
|
// }, |
|
|
|
// textStyle: { |
|
|
|
// color: '#fff', |
|
|
|
// fontSize: 9 |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// itemStyle: { |
|
|
|
// normal: { |
|
|
|
// color: '#F62157' // 标志颜色'#F62157' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// zlevel: 6 |
|
|
|
// } |
|
|
|
], |
|
|
|
animation: true |
|
|
|
} |
|
|
|
myChart.setOption(option) |
|
|
|
myChart.hideLoading() |
|
|
|
myChart.on('click', function(params) { |
|
|
|
var areaCode = params.data.county.areaCode |
|
|
|
var name = params.name |
|
|
|
var jwd = params.data.county.jwd |
|
|
|
_self.$router.push({ |
|
|
|
path: '/kanban/jujiayanglao2', |
|
|
|
query: { name: name, areaCode: areaCode, jwd: jwd } |
|
|
|
// // normal: { |
|
|
|
// // opacity : 1, |
|
|
|
// // borderColor: '#fa3008', |
|
|
|
// // borderWidth: 1, |
|
|
|
// // color: '#ff' |
|
|
|
// // } |
|
|
|
// }, |
|
|
|
// name: 'light', |
|
|
|
// type: 'scatter', |
|
|
|
// coordinateSystem: 'geo', |
|
|
|
// data: this.chartDatas2 |
|
|
|
// }, |
|
|
|
// { |
|
|
|
// // 小图标老人数量 |
|
|
|
// name: 'Top 5', |
|
|
|
// type: 'scatter', |
|
|
|
// coordinateSystem: 'geo', |
|
|
|
// // symbol: 'pin', |
|
|
|
// // symbolSize: [50, 50], |
|
|
|
// symbolOffset: [0, -12], |
|
|
|
// symbol: 'image://home/markertu3.png', |
|
|
|
// symbolSize: [30, 30], |
|
|
|
// label: { |
|
|
|
// normal: { |
|
|
|
// show: false, |
|
|
|
// textStyle: { |
|
|
|
// color: '#ff0', |
|
|
|
// fontSize: 12 |
|
|
|
// }, |
|
|
|
// formatter(value) { |
|
|
|
// return value.data.value[2] // |
|
|
|
// // return value.data.areaCount// |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// itemStyle: { |
|
|
|
// normal: { |
|
|
|
// opacity: 1, |
|
|
|
// borderColor: '#fa3008', |
|
|
|
// borderWidth: 1, |
|
|
|
// color: '#d800ff' |
|
|
|
// // color: '#D8BC37' // 标志颜色 |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// data: this.chartDatas2, |
|
|
|
// showEffectOn: 'render', |
|
|
|
// rippleEffect: { |
|
|
|
// brushType: 'stroke' |
|
|
|
// }, |
|
|
|
// hoverAnimation: true, |
|
|
|
// zlevel: 1 |
|
|
|
// } |
|
|
|
// { |
|
|
|
// data: [ |
|
|
|
// { name: '宁晋县', value: [114.921027, 37.618956, 56] }, |
|
|
|
// { name: '襄都区', value: 0 }, |
|
|
|
// { name: '信都区', value: 0 }, |
|
|
|
// { name: '任泽区', value: 0 }, |
|
|
|
// { name: '南和区', value: 0 }, |
|
|
|
// { name: '临城县', value: 0 }, |
|
|
|
// { name: '内丘县', value: 0 }, |
|
|
|
// { name: '柏乡县', value: 0 }, |
|
|
|
// { name: '隆尧县', value: 0 }, |
|
|
|
// { name: '巨鹿县', value: 0 }, |
|
|
|
// { name: '新河县', value: 0 }, |
|
|
|
// { name: '广宗县', value: 0 }, |
|
|
|
// { name: '平乡县', value: 0 }, |
|
|
|
// { name: '威县', value: 0 }, |
|
|
|
// { name: '清河县', value: 0 }, |
|
|
|
// { name: '临西县', value: 0 }, |
|
|
|
// { name: '南宫市', value: 0 }, |
|
|
|
// { name: '沙河市', value: 0 } |
|
|
|
// ], |
|
|
|
// name: '点', |
|
|
|
// type: 'effectScatter', |
|
|
|
// coordinateSystem: 'geo', |
|
|
|
// // symbol: 'pin', // 气泡 |
|
|
|
// symbolSize: 20, |
|
|
|
// label: { |
|
|
|
// normal: { |
|
|
|
// show: true, |
|
|
|
// formatter: function(params) { |
|
|
|
// return params.data.value[2] |
|
|
|
// }, |
|
|
|
// textStyle: { |
|
|
|
// color: '#fff', |
|
|
|
// fontSize: 9 |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// itemStyle: { |
|
|
|
// normal: { |
|
|
|
// color: '#F62157' // 标志颜色'#F62157' |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// zlevel: 6 |
|
|
|
// } |
|
|
|
], |
|
|
|
animation: true |
|
|
|
} |
|
|
|
myChart.setOption(option) |
|
|
|
myChart.hideLoading() |
|
|
|
myChart.on('click', function (params) { |
|
|
|
var areaCode = params.data.county.areaCode |
|
|
|
var name = params.name |
|
|
|
var jwd = params.data.county.jwd |
|
|
|
_self.$router.push({ |
|
|
|
path: '/kanban/jujiayanglao2', |
|
|
|
query: { name: name, areaCode: areaCode, jwd: jwd } |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
setTimeout(() => { |
|
|
|
myChart.resize() |
|
|
|
// alert('ok') |
|
|
|
}, 800) |
|
|
|
setTimeout(() => { |
|
|
|
myChart.resize() |
|
|
|
// alert('ok') |
|
|
|
}, 800) |
|
|
|
|
|
|
|
var _this = this |
|
|
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
|
|
|
_this.charPie3currentIndex = 0 |
|
|
|
// 2、鼠标移动上去的时候的高亮动画 |
|
|
|
this.chart.on('mouseover', function(param) { |
|
|
|
isSet = false |
|
|
|
// 取消之前高亮的图形 |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'downplay', |
|
|
|
seriesIndex: 0 |
|
|
|
// dataIndex: _this.charPie3currentIndex |
|
|
|
var _this = this |
|
|
|
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 |
|
|
|
_this.charPie3currentIndex = 0 |
|
|
|
// 2、鼠标移动上去的时候的高亮动画 |
|
|
|
this.chart.on('mouseover', function (param) { |
|
|
|
isSet = false |
|
|
|
// 取消之前高亮的图形 |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'downplay', |
|
|
|
seriesIndex: 0 |
|
|
|
// dataIndex: _this.charPie3currentIndex |
|
|
|
}) |
|
|
|
// 高亮当前图形 |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'highlight', |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: param.dataIndex |
|
|
|
}) |
|
|
|
// 显示 tooltip |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'showTip', |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: param.dataIndex |
|
|
|
}) |
|
|
|
}) |
|
|
|
// 高亮当前图形 |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'highlight', |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: param.dataIndex |
|
|
|
}) |
|
|
|
// 显示 tooltip |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'showTip', |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: param.dataIndex |
|
|
|
}) |
|
|
|
}) |
|
|
|
// 3、自动高亮展示 |
|
|
|
var chartHover = function() { |
|
|
|
_this.dataLen = option.series[0].data.length |
|
|
|
// 取消之前高亮的图形 |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'downplay', |
|
|
|
seriesIndex: 0 |
|
|
|
// dataIndex: _this.charPie3currentIndex |
|
|
|
}) |
|
|
|
_this.charPie3currentIndex = |
|
|
|
(_this.charPie3currentIndex + 1) % _this.dataLen |
|
|
|
// 高亮当前图形 |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'highlight', |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: _this.charPie3currentIndex |
|
|
|
}) |
|
|
|
// 显示 tooltip |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'showTip', |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: _this.charPie3currentIndex |
|
|
|
// 3、自动高亮展示 |
|
|
|
var chartHover = function () { |
|
|
|
_this.dataLen = option.series[0].data.length |
|
|
|
// 取消之前高亮的图形 |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'downplay', |
|
|
|
seriesIndex: 0 |
|
|
|
// dataIndex: _this.charPie3currentIndex |
|
|
|
}) |
|
|
|
_this.charPie3currentIndex = |
|
|
|
(_this.charPie3currentIndex + 1) % _this.dataLen |
|
|
|
// 高亮当前图形 |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'highlight', |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: _this.charPie3currentIndex |
|
|
|
}) |
|
|
|
// 显示 tooltip |
|
|
|
_this.chart.dispatchAction({ |
|
|
|
type: 'showTip', |
|
|
|
seriesIndex: 0, |
|
|
|
dataIndex: _this.charPie3currentIndex |
|
|
|
}) |
|
|
|
} |
|
|
|
clearInterval(_this.startCharts) |
|
|
|
_this.startCharts = setInterval(chartHover, 2000) |
|
|
|
// 4、鼠标移出之后，恢复自动高亮 |
|
|
|
this.chart.on('mouseout', function (param) { |
|
|
|
if (!isSet) { |
|
|
|
clearInterval(_this.startCharts) |
|
|
|
_this.startCharts = setInterval(chartHover, 2000) |
|
|
|
isSet = true |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
clearInterval(_this.startCharts) |
|
|
|
_this.startCharts = setInterval(chartHover, 2000) |
|
|
|
// 4、鼠标移出之后，恢复自动高亮 |
|
|
|
this.chart.on('mouseout', function(param) { |
|
|
|
if (!isSet) { |
|
|
|
clearInterval(_this.startCharts) |
|
|
|
_this.startCharts = setInterval(chartHover, 2000) |
|
|
|
isSet = true |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
1181364@qq.com
2 years ago