jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页地图

master
1181364@qq.com 2 years ago
parent
5b1a2beac0
commit
6f62d1c2e0
1 changed files with 467 additions and 468 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 935
      src/views/dashboard/components/HomeMap.vue

935
src/views/dashboard/components/HomeMap.vue
View File

@ -4,496 +4,495 @@
<script> <script>
// import { // import {
// raiseOldWholeData, // raiseOldWholeData,
// exceptionSituation, // exceptionSituation,
// raiseOldmanSituation, // raiseOldmanSituation,
// weekDayCompare, // weekDayCompare,
// getMapDataTongji, // getMapDataTongji,
// bindFuWuLiang // bindFuWuLiang
// } from '@/api/tongji/kanBanJuJiaYangLao' // } from '@/api/tongji/kanBanJuJiaYangLao'
import * as echarts from 'echarts' import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize' import resize from './mixins/resize'
// import xt_data from '@/assets/河北省/邢台市/geojson.json' // import xt_data from '@/assets/河北省/邢台市/geojson.json'
import xt_data from '@/assets/全国/geojson.json' import xt_data from '@/assets/全国/geojson.json'
export default { export default {
mixins: [resize], mixins: [resize],
data() { data() {
return { return {
chartDatas2: [], chartDatas2: [],
chart: null, chart: null,
startCharts: null, startCharts: null,
charPie3currentIndex: 0, charPie3currentIndex: 0,
dataLen: 0 dataLen: 0
}
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
} }
} },
}, watch: {
mounted() { chartData: {
this.$nextTick(() => { deep: true,
this.initChart() handler(val) {
}) this.setOptions(val)
}, }
beforeDestroy() { }
if (!this.chart) { },
return mounted() {
} this.$nextTick(() => {
if (this.startCharts) { this.initChart()
clearInterval(this.startCharts) })
} },
this.chart.dispose() beforeDestroy() {
this.chart = null if (!this.chart) {
}, return
methods: { }
initChart() { if (this.startCharts) {
// getMapDataTongji().then(response => { clearInterval(this.startCharts)
// if (response.code === 20000) { }
// if ( this.chart.dispose()
// response.data !== null && this.chart = null
// response.data !== '' && },
// response.data !== undefined methods: {
// ) { initChart() {
// this.countyData = [] // getMapDataTongji().then(response => {
// for (var i = 0; i < response.data.length; i++) { // if (response.code === 20000) {
// var county = response.data[i] // if (
// this.countyData.push({ // response.data !== null &&
// name: county.title, // response.data !== '' &&
// value: county.departmentCount, // response.data !== undefined
// county: county // ) {
// }) // this.countyData = []
// console.log('chartDatas2', this.chartDatas2) // for (var i = 0; i < response.data.length; i++) {
// if (county.title === '邢东新区') { // var county = response.data[i]
// this.chartDatas2.push({ // this.countyData.push({
// name: '邢东新区', // name: county.title,
// value: [ // value: county.departmentCount,
// 114.597268, // county: county
// 37.096124, // })
// county.departmentCount, // console.log('chartDatas2', this.chartDatas2)
// county.personCount // if (county.title === '邢东新区') {
// ] // this.chartDatas2.push({
// }) // name: '邢东新区',
// } // value: [
// if (county.title === '经济开发区') { // 114.597268,
// this.chartDatas2.push({ // 37.096124,
// name: '经济开发区', // county.departmentCount,
// value: [ // county.personCount
// 114.565733, // ]
// 37.06169, // })
// county.departmentCount, // }
// county.personCount // if (county.title === '经济开发区') {
// ] // this.chartDatas2.push({
// }) // name: '经济开发区',
// } // value: [
// } // 114.565733,
// console.log('chartDatas2aaaa', this.chartDatas2) // 37.06169,
var _self = this // county.departmentCount,
const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置 // county.personCount
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
// }
// }
// } // }
// }, // }
geo: { // console.log('chartDatas2aaaa', this.chartDatas2)
show: true, var _self = this
map: 'xingtai', const myChart = echarts.init(this.$refs.myEchart) // 这里是为了获得容器所在位置
roam: false, this.chart = myChart
label: { window.onresize = myChart.resize
normal: { myChart.showLoading()
show: false 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: true
show: false
}
}, },
itemStyle: { tooltip: {
normal: { alwaysShowContent: true,
areaColor: '#3c8dbc', // 没有值得时候颜色 textStyle: {
borderColor: '#097bba' fontSize: 12,
color: '#ccc'
}, },
emphasis: { trigger: 'item',
areaColor: '#fbd456' // 鼠标滑过选中的颜色 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: { // geo: {
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', // map: 'xingtai',
// emphasis: { // aspectScale: 0.75,
// label: { // layoutCenter: ['50%', '50.5%'],
// show: true, // 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: {
// label: { // areaColor: '#2AB8FF',
// show: true, // borderWidth: 1,
// // formatter: '{b}:{@score}人' // color: 'green',
// }, // label: {
// data: this.countyData, // show: false
// }
// }
// }
// }, // },
{ geo: {
name: '机构数量', show: true,
type: 'map',
roam: false,
map: 'xingtai', map: 'xingtai',
roam: false,
label: { label: {
show: false normal: {
// formatter: '{b}:{@score}人' show: false
},
emphasis: {
show: false
}
}, },
data: this.countyData, itemStyle: {
emphasis: { 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: { label: {
show: true, show: false
fontSize: 20, // formatter: '{b}:{@score}人'
fontWeight: 'bolder'
}, },
itemStyle: { data: this.countyData,
// borderType: 'solid', emphasis: {
// borderWidth: 3, label: {
// borderColor: '#e83e11', show: true,
shadowBlur: 20, fontSize: 20,
shadowOffsetX: 5, fontWeight: 'bolder'
shadowOffsetY: 5 },
itemStyle: {
// borderType: 'solid',
// borderWidth: 3,
// borderColor: '#e83e11',
shadowBlur: 20,
shadowOffsetX: 5,
shadowOffsetY: 5
}
} }
} }
} // {
// { // // 小图标圆圈
// // 小图标圆圈 // symbol: 'circle',
// symbol: 'circle', // symbolSize: 20,
// symbolSize: 20, // label: {
// label: { // normal: {
// normal: { // formatter: '{b}',
// formatter: '{b}', // position: 'right',
// position: 'right', // show: true
// show: true // // textStyle: {
// // textStyle: { // // color: '#f00',
// // color: '#f00', // // fontSize: 12
// // fontSize: 12 // // },
// // }, // },
// }, // emphasis: {
// emphasis: { // show: true
// show: true // }
// } // },
// }, // itemStyle: {
// itemStyle: { // color: '#fa3008',
// color: '#fa3008', // opacity: 1,
// opacity: 1, // borderColor: '#9603ea',
// borderColor: '#9603ea', // borderWidth: 1
// borderWidth: 1
// // normal: { // // normal: {
// // opacity : 1, // // opacity : 1,
// // borderColor: '#fa3008', // // borderColor: '#fa3008',
// // borderWidth: 1, // // borderWidth: 1,
// // color: '#ff' // // color: '#ff'
// // } // // }
// }, // },
// name: 'light', // name: 'light',
// type: 'scatter', // type: 'scatter',
// coordinateSystem: 'geo', // coordinateSystem: 'geo',
// data: this.chartDatas2 // data: this.chartDatas2
// }, // },
// { // {
// // 小图标老人数量 // // 小图标老人数量
// name: 'Top 5', // name: 'Top 5',
// type: 'scatter', // type: 'scatter',
// coordinateSystem: 'geo', // coordinateSystem: 'geo',
// // symbol: 'pin', // // symbol: 'pin',
// // symbolSize: [50, 50], // // symbolSize: [50, 50],
// symbolOffset: [0, -12], // symbolOffset: [0, -12],
// symbol: 'image://home/markertu3.png', // symbol: 'image://home/markertu3.png',
// symbolSize: [30, 30], // symbolSize: [30, 30],
// label: { // label: {
// normal: { // normal: {
// show: false, // show: false,
// textStyle: { // textStyle: {
// color: '#ff0', // color: '#ff0',
// fontSize: 12 // fontSize: 12
// }, // },
// formatter(value) { // formatter(value) {
// return value.data.value[2] // // return value.data.value[2] //
// // return value.data.areaCount// // // return value.data.areaCount//
// } // }
// } // }
// }, // },
// itemStyle: { // itemStyle: {
// normal: { // normal: {
// opacity: 1, // opacity: 1,
// borderColor: '#fa3008', // borderColor: '#fa3008',
// borderWidth: 1, // borderWidth: 1,
// color: '#d800ff' // color: '#d800ff'
// // color: '#D8BC37' // 标志颜色 // // color: '#D8BC37' // 标志颜色
// } // }
// }, // },
// data: this.chartDatas2, // data: this.chartDatas2,
// showEffectOn: 'render', // showEffectOn: 'render',
// rippleEffect: { // rippleEffect: {
// brushType: 'stroke' // brushType: 'stroke'
// }, // },
// hoverAnimation: true, // hoverAnimation: true,
// zlevel: 1 // zlevel: 1
// } // }
// { // {
// data: [ // data: [
// { name: '宁晋县', value: [114.921027, 37.618956, 56] }, // { 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: '巨鹿县', 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: '点', // name: '点',
// type: 'effectScatter', // type: 'effectScatter',
// coordinateSystem: 'geo', // coordinateSystem: 'geo',
// // symbol: 'pin', // 气泡 // // symbol: 'pin', // 气泡
// symbolSize: 20, // symbolSize: 20,
// label: { // label: {
// normal: { // normal: {
// show: true, // show: true,
// formatter: function(params) { // formatter: function(params) {
// return params.data.value[2] // return params.data.value[2]
// }, // },
// textStyle: { // textStyle: {
// color: '#fff', // color: '#fff',
// fontSize: 9 // fontSize: 9
// } // }
// } // }
// }, // },
// itemStyle: { // itemStyle: {
// normal: { // normal: {
// color: '#F62157' // 标志颜色'#F62157' // color: '#F62157' // 标志颜色'#F62157'
// } // }
// }, // },
// zlevel: 6 // zlevel: 6
// } // }
], ],
animation: true animation: true
} }
myChart.setOption(option) myChart.setOption(option)
myChart.hideLoading() myChart.hideLoading()
myChart.on('click', function(params) { myChart.on('click', function (params) {
var areaCode = params.data.county.areaCode var areaCode = params.data.county.areaCode
var name = params.name var name = params.name
var jwd = params.data.county.jwd var jwd = params.data.county.jwd
_self.$router.push({ _self.$router.push({
path: '/kanban/jujiayanglao2', path: '/kanban/jujiayanglao2',
query: { name: name, areaCode: areaCode, jwd: jwd } query: { name: name, areaCode: areaCode, jwd: jwd }
})
}) })
}) setTimeout(() => {
setTimeout(() => { myChart.resize()
myChart.resize() // alert('ok')
// alert('ok') }, 800)
}, 800)
var _this = this var _this = this
var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消 var isSet = true // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
_this.charPie3currentIndex = 0 _this.charPie3currentIndex = 0
// 2、鼠标移动上去的时候的高亮动画 // 2、鼠标移动上去的时候的高亮动画
this.chart.on('mouseover', function(param) { this.chart.on('mouseover', function (param) {
isSet = false isSet = false
// 取消之前高亮的图形 // 取消之前高亮的图形
_this.chart.dispatchAction({ _this.chart.dispatchAction({
type: 'downplay', type: 'downplay',
seriesIndex: 0 seriesIndex: 0
// dataIndex: _this.charPie3currentIndex // 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、自动高亮展示
_this.chart.dispatchAction({ var chartHover = function () {
type: 'highlight', _this.dataLen = option.series[0].data.length
seriesIndex: 0, // 取消之前高亮的图形
dataIndex: param.dataIndex _this.chart.dispatchAction({
}) type: 'downplay',
// 显示 tooltip seriesIndex: 0
_this.chart.dispatchAction({ // dataIndex: _this.charPie3currentIndex
type: 'showTip', })
seriesIndex: 0, _this.charPie3currentIndex =
dataIndex: param.dataIndex (_this.charPie3currentIndex + 1) % _this.dataLen
}) // 高亮当前图形
}) _this.chart.dispatchAction({
// 3、自动高亮展示 type: 'highlight',
var chartHover = function() { seriesIndex: 0,
_this.dataLen = option.series[0].data.length dataIndex: _this.charPie3currentIndex
// 取消之前高亮的图形 })
_this.chart.dispatchAction({ // 显示 tooltip
type: 'downplay', _this.chart.dispatchAction({
seriesIndex: 0 type: 'showTip',
// dataIndex: _this.charPie3currentIndex seriesIndex: 0,
}) dataIndex: _this.charPie3currentIndex
_this.charPie3currentIndex = })
(_this.charPie3currentIndex + 1) % _this.dataLen }
// 高亮当前图形 clearInterval(_this.startCharts)
_this.chart.dispatchAction({ _this.startCharts = setInterval(chartHover, 2000)
type: 'highlight', // 4、鼠标移出之后，恢复自动高亮
seriesIndex: 0, this.chart.on('mouseout', function (param) {
dataIndex: _this.charPie3currentIndex if (!isSet) {
}) clearInterval(_this.startCharts)
// 显示 tooltip _this.startCharts = setInterval(chartHover, 2000)
_this.chart.dispatchAction({ isSet = true
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>
</script>
Write Preview
Loading…
Cancel
Save