<template>
<div ref="chart" id="chart" style="height: 100%; width: 100%"></div>
</template>
<script>
import shanDong from '../../assets/json/china.json' //引入json的文件
mounted() {
this.mapShandong()
this.numList()
},
mapShandong() {
const myChart = this.$echarts.init(document.getElementById('chart'))
this.$echarts.registerMap('jiangxi', shanDong)
myChart.hideLoading()
var geoCoordMap = {
青岛市: [120.355173, 36.082982],
淄博市: [118.047648, 36.814939],
菏泽市: [115.469381, 35.246531],
潍坊市: [119.107078, 36.70925],
济南市: [117.000923, 36.675807],
枣庄市: [117.557964, 34.856424],
东营市: [118.66471, 37.434564],
烟台市: [121.391382, 37.539297],
济宁市: [116.587245, 35.415393],
泰安市: [117.129063, 36.194968],
威海市: [122.116394, 37.509691],
日照市: [119.461208, 35.428588],
临沂市: [118.326443, 35.065282],
德州市: [116.307428, 37.453968],
聊城市: [115.980367, 36.456013],
滨州市: [118.016974, 37.383542],
}
var moveLine = {
normal: [
{
fromName: '青岛市',
toName: '淄博市',
coords: [
[120.355173, 36.082982],
[118.047648, 36.814939],
],
},
{
fromName: '青岛市',
toName: '菏泽市',
coords: [
[120.355173, 36.082982],
[115.469381, 35.246531],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '潍坊市',
coords: [
[120.355173, 36.082982],
[119.107078, 36.70925],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '枣庄市',
coords: [
[120.355173, 36.082982],
[117.557964, 34.856424],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '东营市',
coords: [
[120.355173, 36.082982],
[118.66471, 37.434564],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '烟台市',
coords: [
[120.355173, 36.082982],
[121.391382, 37.539297],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '济宁市',
coords: [
[120.355173, 36.082982],
[116.587245, 35.415393],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '泰安市',
coords: [
[120.355173, 36.082982],
[117.129063, 36.194968],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '日照市',
coords: [
[120.355173, 36.082982],
[119.461208, 35.428588],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '威海市',
coords: [
[120.355173, 36.082982],
[122.116394, 37.509691],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '济南市',
coords: [
[120.355173, 36.082982],
[117.000923, 36.675807],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '临沂市',
coords: [
[120.355173, 36.082982],
[118.326443, 35.065282],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '德州市',
coords: [
[120.355173, 36.082982],
[116.307428, 37.453968],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '聊城市',
coords: [
[120.355173, 36.082982],
[115.980367, 36.456013],
[120.355173, 36.082982],
],
},
{
fromName: '青岛市',
toName: '滨州市',
coords: [
[120.355173, 36.082982],
[118.016974, 37.383542],
[120.355173, 36.082982],
],
},
],
warning: [],
}
var data = [
{ name: '青岛市', value: 190 },
{ name: '淄博市', value: 190 },
{ name: '菏泽市', value: 190 },
{ name: '潍坊市', value: 190 },
{ name: '济南市', value: 190 },
{ name: '枣庄市', value: 190 },
{ name: '东营市', value: 90 },
{ name: '烟台市', value: 120 },
{ name: '济宁市', value: 120 },
{ name: '泰安市', value: 120 },
{ name: '威海市', value: 120 },
{ name: '日照市', value: 190 },
{ name: '临沂市', value: 190 },
{ name: '德州市', value: 190 },
{ name: '聊城市', value: 190 },
{ name: '滨州市', value: 190 },
]
// var max = 480,
// min = 9 // todo
// var maxSize4Pin = 100,
// minSize4Pin = 20
var convertData = function (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
})
}
}
return res
}
var option = {
backgroundColor: '#091c3d',
title: {
top: 20,
text: '',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc',
},
},
tooltip: {
trigger: 'item',
formatter: function (params) {
if (typeof params.value[2] == 'undefined') {
return params.name + ' : ' + params.value
} else {
return params.name + ' : ' + params.value[2]
}
},
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['pm2.5'],
textStyle: {
color: '#fff',
},
},
visualMap: {
show: false,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
// color: ['#3B5077', '#031525'] // 蓝黑
// color: ['#ffc0cb', '#800080'] // 红紫
// color: ['#3C3B3F', '#605C3C'] // 黑绿
//color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
//color: ['#23074d', '#cc5333'] // 紫红
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#1488CC', '#2B32B2'] // 浅蓝
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
},
},
// toolbox: {
// show: true,
// orient: 'vertical',
// left: 'right',
// top: 'center',
// feature: {
// dataView: {readOnly: false},
// restore: {},
// saveAsImage: {}
// }
// },
geo: {
show: true,
map: 'jiangxi',
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
roam: true,
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30,
},
emphasis: {
areaColor: '#2B91B7',
},
},
},
series: [
{
name: 'light',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: '#F4E925',
},
},
},
{
type: 'map',
map: 'jiangxi',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: '#fff',
},
},
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#FFFFFF',
},
emphasis: {
areaColor: '#2B91B7',
},
},
animation: false,
data: data,
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(
data
.sort(function (a, b) {
return b.value - a.value
})
.slice(0, 5)
),
symbolSize: function (val) {
return val[2] / 10
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
},
},
itemStyle: {
normal: {
color: '#F4E925',
shadowBlur: 10,
shadowColor: '#05C3F9',
},
},
zlevel: 1,
},
{
name: '线路',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
large: true,
effect: {
show: true,
constantSpeed: 30,
symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 0,
trailLength: 0,
},
lineStyle: {
normal: {
color: '#0fff17',
/*
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#58B3CC'
}, {
offset: 1, color: '#F58158'
}], false),*/
width: 2,
opacity: 1.0,
curveness: 0.15,
},
},
data: moveLine.normal,
},
{
name: '线路',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
large: true,
effect: {
show: true,
constantSpeed: 30,
symbol: 'arrow', //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: 10,
trailLength: 0,
},
lineStyle: {
normal: {
color: 'rgb(255, 0, 0)',
width: 2,
opacity: 1,
curveness: 0.15,
},
},
data: moveLine.warning,
},
],
}
myChart.setOption(option)
},
</script
|
