282 lines
8.0 KiB
Vue
282 lines
8.0 KiB
Vue
<template>
|
||
<div style="height: 900px">
|
||
<div class="w100" ref="chart" style="height: 900px"></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { selectRecord } from '@/api/trace/dataStatistics';
|
||
import chinaMap from './china.json';
|
||
import gdMap from './gd.json';
|
||
export default {
|
||
data() {
|
||
return {
|
||
chinaGeoCoordMap: {
|
||
云南: [102.9199, 25.4663],
|
||
广东: [113.12244, 23.009505],
|
||
香港: [114.133834, 22.381374],
|
||
四川: [104.063707, 30.658753],
|
||
河北: [114.511072, 38.054693],
|
||
},
|
||
chinaDatas: [
|
||
[{ name: '云南' }],
|
||
[{ name: '广东', value: 62256 }],
|
||
[{ name: '香港', value: 9256 }],
|
||
[{ name: '四川', value: 1256 }],
|
||
[{ name: '河北', value: 382 }],
|
||
],
|
||
};
|
||
},
|
||
props: {
|
||
baseId: Number,
|
||
},
|
||
watch: {
|
||
baseId: {
|
||
handler: async function (n) {
|
||
if (n) {
|
||
await this.$nextTick();
|
||
this.loadMapChart();
|
||
}
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
methods: {
|
||
convertData(data) {
|
||
console.info('convertData', data);
|
||
var res = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
var dataItem = data[i];
|
||
var fromCoord = [102.9199, 25.4663];
|
||
var toCoord = this.chinaGeoCoordMap[dataItem[0].name];
|
||
if (fromCoord && toCoord) {
|
||
res.push([
|
||
{
|
||
coord: fromCoord,
|
||
value: dataItem[0].value,
|
||
},
|
||
{
|
||
coord: toCoord,
|
||
},
|
||
]);
|
||
}
|
||
}
|
||
return res;
|
||
},
|
||
getSeries() {
|
||
let list = [];
|
||
let _this = this;
|
||
[['云南', _this.chinaDatas]].forEach(function (item, i) {
|
||
list.push(
|
||
{
|
||
type: 'lines',
|
||
zlevel: 1,
|
||
effect: {
|
||
show: true,
|
||
period: 4, //箭头指向速度，值越小速度越快
|
||
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||
symbol: 'arrow', //箭头图标
|
||
symbolSize: 5, //图标大小
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
width: 1, //尾迹线条宽度
|
||
opacity: 1, //尾迹线条透明度
|
||
curveness: 0.3, //尾迹线条曲直度
|
||
},
|
||
},
|
||
data: _this.convertData(item[1]),
|
||
},
|
||
{
|
||
type: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
zlevel: 2,
|
||
rippleEffect: {
|
||
//涟漪特效
|
||
period: 4, //动画时间，值越小速度越快
|
||
brushType: 'stroke', //波纹绘制方式 stroke, fill
|
||
scale: 4, //波纹圆环最大限制，值越大波纹越大
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'right', //显示位置
|
||
offset: [5, 0], //偏移设置
|
||
formatter: function (params) {
|
||
//圆环显示文字
|
||
return params.data.name;
|
||
},
|
||
fontSize: 10,
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
},
|
||
},
|
||
symbol: 'circle',
|
||
symbolSize: function (val) {
|
||
return 3 + (val[2] / 2000) * 1; //圆环大小
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
show: false,
|
||
color: '#FFA54F',
|
||
},
|
||
},
|
||
data: item[1].map(function (dataItem) {
|
||
return {
|
||
name: dataItem[0].name,
|
||
value: _this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
|
||
};
|
||
}),
|
||
},
|
||
//被攻击点
|
||
{
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
zlevel: 2,
|
||
rippleEffect: {
|
||
period: 4,
|
||
brushType: 'stroke',
|
||
scale: 4,
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'right',
|
||
//offset:[5, 0],
|
||
color: '#0f0',
|
||
formatter: '{b}',
|
||
textStyle: {
|
||
color: '#0f0',
|
||
},
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
color: '#FFA54F',
|
||
},
|
||
},
|
||
symbol: 'pin',
|
||
symbolSize: 50,
|
||
data: [
|
||
{
|
||
name: item[0],
|
||
value: _this.chinaGeoCoordMap[item[0]].concat([10]),
|
||
},
|
||
],
|
||
}
|
||
);
|
||
});
|
||
return list;
|
||
},
|
||
async loadMapChart() {
|
||
let _this = this;
|
||
var option = {
|
||
title: {
|
||
text: '地图统计图表',
|
||
subtext: '',
|
||
x: 'center',
|
||
y: 'top',
|
||
textStyle: {
|
||
color: '#2b7',
|
||
fontSize: 20,
|
||
fontWeight: 'bold',
|
||
},
|
||
subtextStyle: {
|
||
color: '#C0C4CC',
|
||
fontSize: '15',
|
||
height: '40',
|
||
lineHeight: '40',
|
||
},
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(166, 200, 76, 0.82)',
|
||
borderColor: '#FFFFCC',
|
||
showDelay: 0,
|
||
hideDelay: 0,
|
||
enterable: true,
|
||
transitionDuration: 0,
|
||
extraCssText: 'z-index:100',
|
||
formatter: function (params, ticket, callback) {
|
||
let val = 0;
|
||
if (typeof params.value == 'number') {
|
||
val = params.value;
|
||
} else {
|
||
val = params.value[params.value.length - 1];
|
||
}
|
||
//根据业务自己拓展要显示的内容
|
||
var res = '';
|
||
var name = params.name;
|
||
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
|
||
return res;
|
||
},
|
||
},
|
||
backgroundColor: 'transparent',
|
||
visualMap: {
|
||
//图例值控制
|
||
min: 1,
|
||
max: 500,
|
||
calculable: true,
|
||
show: true,
|
||
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
},
|
||
geo: {
|
||
map: 'china',
|
||
zoom: 1.2,
|
||
top: 250,
|
||
label: {
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
roam: true, //是否允许缩放
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#243c48', //地图背景色
|
||
borderColor: '#005A5C', //省市边界线00fcff 516a89
|
||
borderWidth: 1,
|
||
},
|
||
emphasis: {
|
||
color: 'rgba(37, 43, 61, .5)', //悬浮背景
|
||
},
|
||
},
|
||
},
|
||
series: _this.getSeries(),
|
||
};
|
||
const { rows } = await selectRecord(this.baseId);
|
||
//数据
|
||
// option.series[0].data = rows.map((item) => ({
|
||
// name: item.queryCity,
|
||
// value: [item.queryCoordinate.split(',')[0], item.queryCoordinate.split(',')[1], item.queryCount],
|
||
// }));
|
||
//查询次数
|
||
let i = 956;
|
||
rows.forEach((item) => {
|
||
i += item.queryCount;
|
||
});
|
||
// option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
|
||
option.title.subtext = `我们的产品走过了18个城市，被客户查询了3589次`;
|
||
let myChart = this.$echarts.init(this.$refs.chart);
|
||
this.$echarts.registerMap('china', { geoJSON: chinaMap });
|
||
myChart.on('click', (params) => {
|
||
if (params.name.includes('广东')) {
|
||
this.$emit('dataType', '2');
|
||
} else if (params.name.includes('香港')) {
|
||
this.$emit('dataType', '1');
|
||
} else {
|
||
this.$emit('dataType', '0');
|
||
}
|
||
});
|
||
myChart.setOption(option);
|
||
window.onresize = function () {
|
||
myChart.resize();
|
||
};
|
||
},
|
||
// mapChart(this.$refs.chart, data, i,'rgb(28, 61, 73)','rgb(64, 219, 165)',{fontSize:30});
|
||
},
|
||
};
|
||
</script>
|
||
<style></style>
|