微信截图_20230529154302.png
image.png
<template>
<div class="mapEcharts">
<!-- <div class="table">
<div v-if="table.length > 0" @click="setchina()">
{{ table[0].name }}
</div>
<div v-if="table.length > 1" @click="setprovice()">
<span>></span>
{{ table[1].name }}
</div>
<div v-if="table.length > 2" style="cursor:default">
<span>></span>
{{ table[2].name }}
</div>
</div> -->
<div id="myChart" @contextmenu.prevent></div>
<!-- <div class="fenZi">
今日舆情数量排名：<span>{{ $store.state.code.clue_paiming }}</span
>/<span>{{ $store.state.code.clue_paiming_total }}</span>
</div> -->
</div>
</template>
<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
props: {
datas: {
type: [Array, Object],
default: null
},
id: {
type: String,
default: null
}
},
data() {
return {
myChart: null,
provinceCode: null,
proviceName: null,
cityCode: null,
cityName: null,
table: [{ name: '全国', Code: 100000 }],
customerNum: [
// { name: '高新区', value: 92 },
// { name: '金牛区', value: 33 },
// { name: '青羊区', value: 73 },
// { name: '锦江区', value: 53 },
// { name: '成华区', value: 47 },
// { name: '武侯区', value: 41 },
// { name: '双流区', value: 5 },
// { name: '天府新区', value: 115 },
// { name: '郫都区', value: 37 },
// { name: '新都区', value: 30 },
// { name: '温江区', value: 24 },
// { name: '东部新区', value: 23 },
// { name: '龙泉驿区', value: 29 },
// { name: '彭州市', value: 21 },
// { name: '新津区', value: 13 },
// { name: '都江堰市', value: 12 },
// { name: '青白江区', value: 11 },
// { name: '简阳市', value: 6 },
// { name: '邛崃市', value: 6 },
// { name: '大邑县', value: 4 },
// { name: '崇州市', value: 5 },
// { name: '金堂县', value: 0 },
// { name: '蒲江县', value: 0 }
]
}
},
watch: {
// 这是监听json值变化
datas: {
// json为监听参数名
handler: function (val, oldVal) {
// 不能用箭头函数
this.customerNum = val
this.mapFun()
}
}
},
beforeDestroy() {
clearInterval(this.Time1)
},
async mounted() {
// await this.getData();
// this.Time1 = setInterval(() => {
// this.getData();
// }, 60000);
this.myChart = echarts.init(document.getElementById('myChart'))
this.myChart.on('contextmenu', (event) => {
// 右键返回上一级
window.event.returnValue = false // 关闭右键窗口
// this.goBack();
})
},
methods: {
/** 获取部门部署的数据 */
mapFun() {
var geoCoordMap = {
成都市: [104.065646, 30.657422],
自贡市: [104.78, 29.34],
攀枝花市: [101.72, 26.58],
泸州市: [105.44, 28.87],
德阳市: [104.40, 31.13],
绵阳市: [104.68, 31.47],
广元市: [105.84, 32.44],
遂宁市: [105.59, 30.53],
内江市: [105.06, 29.58],
乐山市: [103.77, 29.55],
南充市: [106.11, 30.84],
眉山市: [103.85, 30.08],
宜宾市: [104.64, 28.75],
广安市: [106.63, 30.46],
达州市: [107.47, 31.21],
雅安市: [103.04, 30.01],
巴中市: [106.75, 31.87],
资阳市: [104.63, 30.13],
阿坝藏族羌族自治州: [102.22, 31.90],
甘孜藏族自治州: [101.96, 30.05],
凉山彝族自治州: [102.27, 27.88]
}
var customerBatteryCityData = this.customerNum.filter((v) =>
geoCoordMap.hasOwnProperty(v.name)
)
customerBatteryCityData.sort(function (a, b) {
return a.value < b.value ? 1 : -1
})
// /mapJson/siCuan.json
// /smpurg3lzh8ibnr6/public/mapJson/siCuan.json
axios
.get((process.env.VUE_APP_BASE_API != 'smpurg3lzh8ibnr6' ? '' : '/smpurg3lzh8ibnr6') + '/mapJson/siCuan.json')
.then((red) => {
echarts.registerMap('siCuan', red.data)
let option = {
tooltip: {
trigger: 'item',
show: true,
enterable: true,
textStyle: {
fontSize: 20,
color: '#fff'
},
backgroundColor: 'rgba(0,2,89,0.8)',
formatter: (v) => {
return `${v.name}<br />${this.customerNum.find((v2) => (v.name.includes(v2.name))).value || 0}` // 给纵坐标的值统一除以10000 就变成了以万为单位
}
},
geo: [
{
id: 'siCuan1',
map: 'siCuan',
aspectScale: 1, // 长宽比
roam: false, // 是否允许缩放
zoom: 1.15, // 默认显示级别
layoutSize: '95%',
layoutCenter: ['50%', '55%'],
itemStyle: {
areaColor: {// 地图颜色
type: 'linear-gradient',
x: 0,
y: 400,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(37,108,190,0.3)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(15,169,195,0.3)' // 50% 处的颜色
}
],
global: true // 缺省为 false
},
borderColor: '#4ecee6',
borderWidth: 1,
emphasis: {// 移入样式
// areaColor: 'transparent'
areaColor: {
type: 'linear-gradient',
x: 0,
y: 300,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(37,108,190,1)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(15,169,195,1)' // 50% 处的颜色
}
],
global: true // 缺省为 false
}
}
},
emphasis: {
label: {// 移入后的文本样式
show: true,
color: '#fff'
}
},
label: {
show: false, // 不显示城市名
textStyle: {
color: '#fff'
},
emphasis: {
show: true,
textStyle: {
color: '#fff'
}
}
},
zlevel: 3
},
{
map: 'siCuan',
aspectScale: 1, // 长宽比
roam: false, // 是否允许缩放
zoom: 1.15, // 默认显示级别
layoutSize: '95%',
layoutCenter: ['50%', '55%'],
itemStyle: {
normal: {
borderColor: 'rgba(192,245,249,.6)',
borderWidth: 2,
shadowColor: '#2C99F6',
shadowOffsetY: 0,
shadowBlur: 120,
// areaColor: 'rgba(29,85,139,.2)'
areaColor: 'transparent'
}
},
zlevel: 2,
silent: true,
emphasis: {
areaColor: 'transparent'
}
},
{
map: 'siCuan',
aspectScale: 1, // 长宽比
roam: false, // 是否允许缩放
zoom: 1.15, // 默认显示级别
layoutSize: '95%',
layoutCenter: ['50%', '56.5%'],
itemStyle: {
areaColor: 'rgba(0,27,95,0.4)',
// areaColor: 'transparent',
borderColor: '#004db5',
borderWidth: 1
},
zlevel: 1,
silent: true,
emphasis: {
areaColor: 'transparent'
}
}
],
series: [
// map
{
geoIndex: 0,
selectedMode: false, // 关闭点击选中效果
coordinateSystem: 'geo',
showLegendSymbol: true,
type: 'map',
roam: true,
itemStyle: {
normal: {
borderColor: '#2ab8ff',
borderWidth: 1.5,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 300,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(37,108,190,1)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(15,169,195,1)' // 50% 处的颜色
}
],
global: true // 缺省为 false
}
},
emphasis: {
areaColor: '#2AB8FF',
borderWidth: 0,
color: 'red'
}
},
map: 'siCuan', // 使用
data: customerBatteryCityData
// data: this.difficultData //热力图数据 不同区域 不同的底色
},
// 柱状体的顶部-----------------------------------
{
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 4,
label: {
show: true,
formatter: function (v) {
let number
if (customerBatteryCityData[v.dataIndex].value == 0) {
number =
'{d|' + customerBatteryCityData[v.dataIndex].value + '}'
} else {
if (v.dataIndex <= 2) {
number =
'{a|' +
customerBatteryCityData[v.dataIndex].value +
'}'
} else if (v.dataIndex >= 3 && v.dataIndex <= 5) {
number =
'{b|' +
customerBatteryCityData[v.dataIndex].value +
'}'
} else {
number =
'{c|' +
customerBatteryCityData[v.dataIndex].value +
'}'
}
}
return number
},
rich: {
a: {
// color: 'rgb(234,60,60, 1)'
color: '#fff'
},
b: {
// color: 'rgb(255,175,0,1)'
color: '#fff'
},
c: {
// color: 'rgb(54,221,221,1)'
color: '#fff'
},
d: {
// color: 'rgb(54,221,221,1)'
color: 'rgba(225,225,225,0.7)'
}
},
// textBorderWidth: '1',
// textBorderColor: '#fff',
fontSize: 15,
fontWeight: 'lighter',
position: 'top'
},
symbol: 'circle',
symbolSize: [15, 10],
itemStyle: {
// color: 'rgb(234,60,60, 1)',
color: function (v) {
if (customerBatteryCityData[v.dataIndex].value == 0) {
return 'rgb(54,221,221,0.3)'
} else {
if (v.dataIndex <= 2) {
return 'rgb(234,60,60, 1)'
} else if (v.dataIndex >= 3 && v.dataIndex <= 5) {
return 'rgb(255,175,0,1)'
} else {
return 'rgb(54,221,221,1)'
}
}
},
opacity: 1
},
silent: true,
data: scatterData()
},
// 柱状体的主干-----------------------------------
{
type: 'lines',
zlevel: 4,
effect: {
show: false,
// period: 4, //箭头指向速度，值越小速度越快
// trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
// symbol: 'arrow', //箭头图标
// symbol: imgDatUrl,
symbolSize: 5 // 图标大小
},
lineStyle: {
width: 15, // 尾迹线条宽度
// color: 'rgb(234,60,60,0.6)',
color: function (v) {
if (v.dataIndex <= 2) {
return 'rgb(234,60,60,0.6)'
} else if (v.dataIndex >= 3 && v.dataIndex <= 5) {
return 'rgb(255,175,0,0.6)'
} else {
return 'rgb(54,221,221,0.6)'
}
},
opacity: 1, // 尾迹线条透明度
curveness: 0 // 尾迹线条曲直度
},
label: {
show: 0,
position: 'end',
formatter: '245'
},
silent: true,
data: lineData()
},
// 柱状体的底部-----------------------------------
{
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 3,
label: {
// 这儿是处理的
formatter: '{b}',
position: 'bottom',
color: '#fff',
fontSize: 14,
fontWeight: 'bolder',
distance: 10,
show: false
},
symbol: 'circle',
symbolSize: [15, 10],
rippleEffect: {
brushType: 'stroke'
},
itemStyle: {
// color: 'rgb(234,60,60, 1)',
color: function (v) {
if (customerBatteryCityData[v.dataIndex].value == 0) {
return 'rgb(54,221,221,0.3)'
} else {
if (v.dataIndex <= 2) {
return 'rgb(234,60,60, 1)'
} else if (v.dataIndex >= 3 && v.dataIndex <= 5) {
return 'rgb(255,175,0,1)'
} else {
return 'rgb(54,221,221,1)'
}
}
},
opacity: 1
},
silent: true,
data: scatterData2()
}
]
}
this.myChart.setOption(option)
this.myChart.on('click', (params) => {
console.log('触发', params)
});
})
// 动态计算柱形图的高度（定一个max）
function lineMaxHeight() {
const maxValue = Math.max(
...customerBatteryCityData.map((item) => item.value)
)
return 0.2 / maxValue
}
// 柱状体的主干
function lineData() {
return customerBatteryCityData.map((item) => {
return {
coords: [
geoCoordMap[item.name],
[
geoCoordMap[item.name][0],
geoCoordMap[item.name][1] + item.value * lineMaxHeight()
]
]
}
})
}
// 柱状体的顶部
function scatterData() {
return customerBatteryCityData.map((item) => {
return [
geoCoordMap[item.name][0],
geoCoordMap[item.name][1] + item.value * lineMaxHeight()
]
})
}
// 柱状体的底部
function scatterData2() {
return customerBatteryCityData.map((item) => {
return {
name: item.name,
value: geoCoordMap[item.name]
}
})
}
}
}
}
</script>
<style lang="scss" scoped>
.mapEcharts {
width: 100%;
height: 120%;
position: relative;
top: -9vh;
}
.table {
display: flex;
padding: 15px 0 0 50px;
>div {
cursor: pointer;
>span {
display: inline-block;
margin: 0 5px;
}
}
>div:nth-of-type(2) {
color: aqua;
}
>div:nth-of-type(3) {
color: aquamarine;
}
}
#myChart {
width: 100%;
height: 100%;
}
.fenZi {
position: absolute;
right: 50px;
top: 8vh;
font-weight: 600;
>span:nth-of-type(1) {
font-size: 20px;
font-weight: 600;
margin-right: 3px;
color: #82d7ff;
}
>span:nth-of-type(2) {
margin-left: 3px;
font-size: 16px;
font-weight: 100;
}
}
</style>
网友评论