飞线图
This commit is contained in:
parent
8c96ff7ae8
commit
6d72828ede
200
src/views/dataV/pageFive/tracemap copy.vue
Normal file
200
src/views/dataV/pageFive/tracemap copy.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<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: {
|
||||
黑龙江: [127.9688, 45.368],
|
||||
内蒙古: [110.3467, 41.4899],
|
||||
吉林: [125.8154, 44.2584],
|
||||
北京市: [116.4551, 40.2539],
|
||||
辽宁: [123.1238, 42.1216],
|
||||
河北: [114.4995, 38.1006],
|
||||
天津: [117.4219, 39.4189],
|
||||
山西: [112.3352, 37.9413],
|
||||
陕西: [109.1162, 34.2004],
|
||||
甘肃: [103.5901, 36.3043],
|
||||
宁夏: [106.3586, 38.1775],
|
||||
青海: [101.4038, 36.8207],
|
||||
新疆: [87.9236, 43.5883],
|
||||
西藏: [91.11, 29.97],
|
||||
四川: [103.9526, 30.7617],
|
||||
重庆: [108.384366, 30.439702],
|
||||
山东: [117.1582, 36.8701],
|
||||
河南: [113.4668, 34.6234],
|
||||
江苏: [118.8062, 31.9208],
|
||||
安徽: [117.29, 32.0581],
|
||||
湖北: [114.3896, 30.6628],
|
||||
浙江: [119.5313, 29.8773],
|
||||
福建: [119.4543, 25.9222],
|
||||
江西: [116.0046, 28.6633],
|
||||
湖南: [113.0823, 28.2568],
|
||||
贵州: [106.6992, 26.7682],
|
||||
云南: [102.9199, 25.4663],
|
||||
广东: [113.12244, 23.009505],
|
||||
广西: [108.479, 23.1152],
|
||||
海南: [110.3893, 19.8516],
|
||||
上海: [121.4648, 31.2891],
|
||||
},
|
||||
chinaDatas: [
|
||||
[{ name: '黑龙江', value: 500 }],
|
||||
[{ name: '内蒙古', value: 300 }],
|
||||
[{ name: '北京市', value: 200 }],
|
||||
[{ name: '吉林', value: 300 }],
|
||||
[{ name: '辽宁', value: 500 }],
|
||||
[{ name: '河北', value: 600 }],
|
||||
[{ name: '天津', value: 500 }],
|
||||
[{ name: '山西', value: 700 }],
|
||||
[{ name: '陕西', value: 600 }],
|
||||
[{ name: '甘肃', value: 500 }],
|
||||
[{ name: '宁夏', value: 500 }],
|
||||
[{ name: '青海', value: 700 }],
|
||||
[{ name: '新疆', value: 300 }],
|
||||
[{ name: '西藏', value: 300 }],
|
||||
[{ name: '四川', value: 1000 }],
|
||||
[{ name: '重庆', value: 900 }],
|
||||
[{ name: '广东', value: 300 }],
|
||||
[{ name: '山东', value: 600 }],
|
||||
[{ name: '河南', value: 1800 }],
|
||||
[{ name: '江苏', value: 1000 }],
|
||||
[{ name: '安徽', value: 900 }],
|
||||
[{ name: '湖北', value: 3200 }],
|
||||
[{ name: '浙江', value: 1600 }],
|
||||
[{ name: '福建', value: 900 }],
|
||||
[{ name: '湖南', value: 2400 }],
|
||||
[{ name: '贵州', value: 800 }],
|
||||
[{ name: '广西', value: 700 }],
|
||||
[{ name: '海南', value: 700 }],
|
||||
[{ name: '上海', value: 170 }],
|
||||
[{ name: '江西', value: 170 }],
|
||||
[{ name: '云南', value: 500 }],
|
||||
],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
baseId: Number,
|
||||
},
|
||||
watch: {
|
||||
baseId: {
|
||||
handler: async function (n) {
|
||||
if (n) {
|
||||
await this.$nextTick();
|
||||
this.loadMapChart();
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async loadMapChart() {
|
||||
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',
|
||||
},
|
||||
},
|
||||
toolbox: {},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
show: false,
|
||||
type: 'piecewise',
|
||||
pieces: [
|
||||
{ gt: 1500 }, // (1500, Infinity]
|
||||
{ gt: 900, lte: 1500 }, // (900, 1500]
|
||||
{ gt: 310, lte: 1000 }, // (310, 1000]
|
||||
{ gt: 200, lte: 300 }, // (200, 300]
|
||||
{ gt: 0, lte: 200, color: '#2b7' },
|
||||
],
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: 'guangdong',
|
||||
roam: true,
|
||||
show: true,
|
||||
zoom: 1.3,
|
||||
top: 250,
|
||||
select: {
|
||||
disabled: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
areaColor: '#243c48',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 10, // 字号
|
||||
color: '#fff', // 名称颜色
|
||||
},
|
||||
regions: [
|
||||
{ name: '深圳市', itemStyle: { areaColor: '#41c0c7' } },
|
||||
{ name: '珠海市', itemStyle: { areaColor: '#417cc7' } },
|
||||
{ name: '广州市', itemStyle: { areaColor: '#9d63cf' } },
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return `在${param.data.name}查询了${param.data.value[2]}次`;
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
symbol:
|
||||
'image://data:image/png;base64,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',
|
||||
symbolSize: '28',
|
||||
coordinateSystem: 'geo',
|
||||
data: null,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
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 = 0;
|
||||
rows.forEach((item) => {
|
||||
i += item.queryCount;
|
||||
});
|
||||
option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
|
||||
let myChart = this.$echarts.init(this.$refs.chart);
|
||||
this.$echarts.registerMap('guangdong', { geoJSON: chinaMap });
|
||||
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>
|
||||
@ -9,7 +9,74 @@ import chinaMap from './china.json';
|
||||
import gdMap from './gd.json';
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
chinaGeoCoordMap: {
|
||||
黑龙江: [127.9688, 45.368],
|
||||
内蒙古: [110.3467, 41.4899],
|
||||
吉林: [125.8154, 44.2584],
|
||||
北京市: [116.4551, 40.2539],
|
||||
辽宁: [123.1238, 42.1216],
|
||||
河北: [114.4995, 38.1006],
|
||||
天津: [117.4219, 39.4189],
|
||||
山西: [112.3352, 37.9413],
|
||||
陕西: [109.1162, 34.2004],
|
||||
甘肃: [103.5901, 36.3043],
|
||||
宁夏: [106.3586, 38.1775],
|
||||
青海: [101.4038, 36.8207],
|
||||
新疆: [87.9236, 43.5883],
|
||||
西藏: [91.11, 29.97],
|
||||
四川: [103.9526, 30.7617],
|
||||
重庆: [108.384366, 30.439702],
|
||||
山东: [117.1582, 36.8701],
|
||||
河南: [113.4668, 34.6234],
|
||||
江苏: [118.8062, 31.9208],
|
||||
安徽: [117.29, 32.0581],
|
||||
湖北: [114.3896, 30.6628],
|
||||
浙江: [119.5313, 29.8773],
|
||||
福建: [119.4543, 25.9222],
|
||||
江西: [116.0046, 28.6633],
|
||||
湖南: [113.0823, 28.2568],
|
||||
贵州: [106.6992, 26.7682],
|
||||
云南: [102.9199, 25.4663],
|
||||
广东: [113.12244, 23.009505],
|
||||
广西: [108.479, 23.1152],
|
||||
海南: [110.3893, 19.8516],
|
||||
上海: [121.4648, 31.2891],
|
||||
},
|
||||
chinaDatas: [
|
||||
[{ name: '黑龙江', value: 500 }],
|
||||
[{ name: '内蒙古', value: 300 }],
|
||||
[{ name: '北京市', value: 200 }],
|
||||
[{ name: '吉林', value: 300 }],
|
||||
[{ name: '辽宁', value: 500 }],
|
||||
[{ name: '河北', value: 600 }],
|
||||
[{ name: '天津', value: 500 }],
|
||||
[{ name: '山西', value: 700 }],
|
||||
[{ name: '陕西', value: 600 }],
|
||||
[{ name: '甘肃', value: 500 }],
|
||||
[{ name: '宁夏', value: 500 }],
|
||||
[{ name: '青海', value: 700 }],
|
||||
[{ name: '新疆', value: 300 }],
|
||||
[{ name: '西藏', value: 300 }],
|
||||
[{ name: '四川', value: 1000 }],
|
||||
[{ name: '重庆', value: 900 }],
|
||||
[{ name: '广东', value: 300 }],
|
||||
[{ name: '山东', value: 600 }],
|
||||
[{ name: '河南', value: 1800 }],
|
||||
[{ name: '江苏', value: 1000 }],
|
||||
[{ name: '安徽', value: 900 }],
|
||||
[{ name: '湖北', value: 3200 }],
|
||||
[{ name: '浙江', value: 1600 }],
|
||||
[{ name: '福建', value: 900 }],
|
||||
[{ name: '湖南', value: 2400 }],
|
||||
[{ name: '贵州', value: 800 }],
|
||||
[{ name: '广西', value: 700 }],
|
||||
[{ name: '海南', value: 700 }],
|
||||
[{ name: '上海', value: 170 }],
|
||||
[{ name: '江西', value: 170 }],
|
||||
[{ name: '云南', value: 500 }],
|
||||
],
|
||||
};
|
||||
},
|
||||
props: {
|
||||
baseId: Number,
|
||||
@ -26,7 +93,135 @@ export default {
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
convertData(data) {
|
||||
console.info('convertData',data)
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var dataItem = data[i];
|
||||
var fromCoord = [114.3896, 30.6628];
|
||||
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) {
|
||||
console.log('getSeries',_this);
|
||||
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] / 100) * 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: '地图统计图表',
|
||||
@ -45,70 +240,58 @@ export default {
|
||||
lineHeight: '40',
|
||||
},
|
||||
},
|
||||
toolbox: {},
|
||||
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) {
|
||||
//根据业务自己拓展要显示的内容
|
||||
var res = '';
|
||||
var name = params.name;
|
||||
var value = params.value[params.seriesIndex + 1];
|
||||
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value;
|
||||
return res;
|
||||
},
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 1000,
|
||||
show: false,
|
||||
type: 'piecewise',
|
||||
pieces: [
|
||||
{ gt: 1500 }, // (1500, Infinity]
|
||||
{ gt: 900, lte: 1500 }, // (900, 1500]
|
||||
{ gt: 310, lte: 1000 }, // (310, 1000]
|
||||
{ gt: 200, lte: 300 }, // (200, 300]
|
||||
{ gt: 0, lte: 200, color: '#2b7' },
|
||||
],
|
||||
//图例值控制
|
||||
min: 1,
|
||||
max: 4000,
|
||||
calculable: true,
|
||||
show: true,
|
||||
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
map: 'guangdong',
|
||||
roam: true,
|
||||
show: true,
|
||||
zoom: 1,
|
||||
top: 100,
|
||||
select: {
|
||||
disabled: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
areaColor: '#243c48',
|
||||
},
|
||||
label:{
|
||||
show:true,
|
||||
fontSize: 10, // 字号
|
||||
color: '#fff', // 名称颜色
|
||||
},
|
||||
regions: [
|
||||
{
|
||||
name: '深圳市', // 必须与地图数据中的名称完全一致
|
||||
itemStyle: {
|
||||
areaColor: '#41c0c7', // 区域填充色
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return `在${param.data.name}查询了${param.data.value[2]}次`;
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'scatter',
|
||||
symbol:
|
||||
'image://data:image/png;base64,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',
|
||||
symbolSize: '28',
|
||||
coordinateSystem: 'geo',
|
||||
data: null,
|
||||
label: {
|
||||
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);
|
||||
//数据
|
||||
@ -123,7 +306,7 @@ export default {
|
||||
});
|
||||
option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
|
||||
let myChart = this.$echarts.init(this.$refs.chart);
|
||||
this.$echarts.registerMap('guangdong', { geoJSON: gdMap });
|
||||
this.$echarts.registerMap('china', { geoJSON: chinaMap });
|
||||
myChart.setOption(option);
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user