291 lines
6.7 KiB
Vue
291 lines
6.7 KiB
Vue
<template>
|
|
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import 'echarts-liquidfill/src/liquidFill.js'
|
|
import './china.js'
|
|
import './bmap.min.js'
|
|
import * as echarts from 'echarts'
|
|
import { EChartsType } from 'echarts/core'
|
|
import { onMounted } from 'vue'
|
|
|
|
let props = defineProps({
|
|
className: {
|
|
type: String,
|
|
default: 'chart',
|
|
},
|
|
config: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
id: {
|
|
type: String,
|
|
default: 'chart',
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '200px',
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '200px',
|
|
},
|
|
})
|
|
|
|
//城市经纬度
|
|
var geoCoordMap = {
|
|
北京: [116.46, 39.92],
|
|
成都: [104.06, 30.67],
|
|
杭州: [120.19, 30.26],
|
|
济南: [117, 36.65],
|
|
福州: [119.3, 26.08],
|
|
上海: [121.48, 31.22],
|
|
重庆: [106.54, 29.59],
|
|
深圳: [114.07, 22.62],
|
|
宁波: [121.56, 29.86],
|
|
南昌: [115.89, 28.68],
|
|
广州: [113.23, 23.16],
|
|
厦门: [118.1, 24.46],
|
|
太原: [112.53, 37.87],
|
|
哈尔滨: [126.63, 45.75],
|
|
西安: [108.95, 34.27],
|
|
沈阳: [123.38, 41.8],
|
|
大连: [121.62, 38.92],
|
|
海口: [110.35, 20.02],
|
|
长沙: [113, 28.21],
|
|
银川: [106.27, 38.47],
|
|
石家庄: [114.48, 38.03],
|
|
昆明: [102.73, 25.04],
|
|
武汉: [114.31, 30.52],
|
|
呼和浩特: [111.65, 40.82],
|
|
天津: [117.2, 39.13],
|
|
贵阳: [106.71, 26.57],
|
|
兰州: [103.73, 36.03],
|
|
青岛: [120.33, 36.07],
|
|
南京: [118.78, 32.04],
|
|
长春: [125.35, 43.88],
|
|
郑州: [113.65, 34.76],
|
|
西宁: [101.74, 36.56],
|
|
合肥: [117.27, 31.86],
|
|
南宁: [108.33, 22.84],
|
|
拉萨: [91.11, 29.97],
|
|
乌鲁木齐: [87.68, 43.77],
|
|
}
|
|
|
|
//数据部分
|
|
var data = [
|
|
{ name: '北京', value: 88.8 },
|
|
{ name: '成都', value: 88.7 },
|
|
{ name: '厦门', value: 88.01 },
|
|
{ name: '杭州', value: 87.9 },
|
|
{ name: '济南', value: 87.48 },
|
|
{ name: '福州', value: 87.47 },
|
|
{ name: '上海', value: 87.43 },
|
|
{ name: '重庆', value: 87.38 },
|
|
{ name: '深圳', value: 87.37 },
|
|
{ name: '昆明', value: 87.26 },
|
|
{ name: '宁波', value: 87.1 },
|
|
{ name: '南昌', value: 86.06 },
|
|
{ name: '广州', value: 85.89 },
|
|
{ name: '太原', value: 84.45 },
|
|
{ name: '哈尔滨', value: 83.96 },
|
|
{ name: '西安', value: 83.24 },
|
|
{ name: '沈阳', value: 82.96 },
|
|
{ name: '大连', value: 82.94 },
|
|
{ name: '海口', value: 82.88 },
|
|
{ name: '长沙', value: 82.85 },
|
|
{ name: '银川', value: 82.49 },
|
|
{ name: '石家庄', value: 82.24 },
|
|
{ name: '武汉', value: 81.68 },
|
|
{ name: '呼和浩特', value: 81.61 },
|
|
{ name: '天津', value: 80.99 },
|
|
{ name: '贵阳', value: 80.71 },
|
|
{ name: '兰州', value: 80.69 },
|
|
{ name: '南京', value: 80.65 },
|
|
{ name: '青岛', value: 80.61 },
|
|
{ name: '长春', value: 80.1 },
|
|
{ name: '郑州', value: 79.56 },
|
|
{ name: '西宁', value: 79.07 },
|
|
{ name: '南宁', value: 78.2 },
|
|
{ name: '合肥', value: 77.29 },
|
|
{ name: '乌鲁木齐', value: 76.91 },
|
|
{ name: '拉萨', value: 76.01 },
|
|
]
|
|
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
|
|
}
|
|
|
|
const options = {
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
dataView: {
|
|
show: true,
|
|
readOnly: true,
|
|
},
|
|
restore: {
|
|
show: true,
|
|
},
|
|
saveAsImage: {
|
|
show: true,
|
|
},
|
|
},
|
|
top: 40,
|
|
right: 40,
|
|
},
|
|
title: {
|
|
//text: '2020年全国大厅监测得分',
|
|
top: 40,
|
|
//subtext: 'from 零点有数',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
fontSize: 30,
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 20,
|
|
},
|
|
},
|
|
legend: {
|
|
left: 'left',
|
|
data: ['强', '中', '弱'],
|
|
textStyle: {
|
|
color: '#ccc',
|
|
},
|
|
},
|
|
backgroundColor: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#0f2c70', // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#091732', // 100% 处的颜色
|
|
},
|
|
],
|
|
globalCoord: false, // 缺省为 false
|
|
},
|
|
visualMap: {
|
|
min: 75,
|
|
max: 90,
|
|
left: 40,
|
|
bottom: 40,
|
|
calculable: false,
|
|
text: ['高', '低'],
|
|
inRange: {
|
|
color: ['rgb(4, 1, 255)', 'rgb(225, 1, 255)'],
|
|
},
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
geo: {
|
|
map: 'china',
|
|
show: true,
|
|
roam: true,
|
|
label: {
|
|
emphasis: {
|
|
show: true,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#091632',
|
|
borderColor: '#1773c3',
|
|
shadowColor: '#1773c3',
|
|
shadowBlur: 20,
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'map',
|
|
map: 'china',
|
|
geoIndex: 1,
|
|
aspectScale: 0.75, //长宽比
|
|
showLegendSymbol: true, // 存在legend时显示
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
show: false,
|
|
textStyle: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
},
|
|
roam: true,
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#031525',
|
|
borderColor: '#3B5077',
|
|
borderWidth: 1.5,
|
|
},
|
|
emphasis: {
|
|
areaColor: '#0f2c70',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '城市',
|
|
type: 'scatter',
|
|
coordinateSystem: 'geo',
|
|
data: convertData(data),
|
|
symbolSize: function (val) {
|
|
return val[2] / 8
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: '{b}',
|
|
position: 'bottom',
|
|
textStyle: {
|
|
fontSize: 10,
|
|
fontWeight: 'bolder',
|
|
color: '#ffffff',
|
|
},
|
|
show: true,
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#ddb926',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
}
|
|
let chart: EChartsType
|
|
const initChart = () => {
|
|
let chart = echarts.init(document.getElementById(props.id))
|
|
chart.setOption(options)
|
|
return chart
|
|
}
|
|
onMounted(() => {
|
|
chart = initChart()
|
|
window.addEventListener('resize', function () {
|
|
chart && chart.resize()
|
|
})
|
|
})
|
|
</script>
|