|
|
|
<template>
|
|
|
|
<div ref="myEchart" class="content" :style="{ height: '100%', width: '100%', margin: '0px 10px 10px 10px' }"></div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<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)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
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': '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' // 字体加粗
|
|
|
|
},
|
|
|
|
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,'
|
|
|
|
)
|
|
|
|
return (
|
|
|
|
params.name +
|
|
|
|
'<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
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// },
|
|
|
|
geo: {
|
|
|
|
show: true,
|
|
|
|
map: 'xingtai',
|
|
|
|
roam: false,
|
|
|
|
label: {
|
|
|
|
normal: {
|
|
|
|
show: false
|
|
|
|
},
|
|
|
|
emphasis: {
|
|
|
|
show: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
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: false
|
|
|
|
// formatter: '{b}:{@score}人'
|
|
|
|
},
|
|
|
|
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
|
|
|
|
|
|
|
|
// // 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)
|
|
|
|
|
|
|
|
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
|
|
|
|
})
|
|
|
|
})
|
|
|
|
// 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
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|