Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

暂时取消飞线 

暂时取消飞线
This commit is contained in:
TimSpan 2024-08-15 14:19:46 +08:00
parent ec4f2ef216
commit fc584ca5c1
2 changed files with 153 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/utils/effectScatterData.ts
View File

@ -3,57 +3,57 @@ export default [
name: '长沙市', name: '长沙市',
value: [112.94, 28.23], value: [112.94, 28.23],
}, },
{ // {
name: '怀化市', // name: '怀化市',
value: [110.0, 27.57], // value: [110.0, 27.57],
}, // },
{ // {
name: '益阳市', // name: '益阳市',
value: [112.36, 28.55], // value: [112.36, 28.55],
}, // },
{ // {
name: '常德市', // name: '常德市',
value: [111.7, 29.03], // value: [111.7, 29.03],
}, // },
{ // {
name: '岳阳市', // name: '岳阳市',
value: [113.13, 29.36], // value: [113.13, 29.36],
}, // },
{ // {
name: '张家界市', // name: '张家界市',
value: [110.48, 29.12], // value: [110.48, 29.12],
}, // },
{ // {
name: '邵阳市', // name: '邵阳市',
value: [111.47, 27.24], // value: [111.47, 27.24],
}, // },
{ // {
name: '娄底市', // name: '娄底市',
value: [111.99, 27.7], // value: [111.99, 27.7],
}, // },
{ // {
name: '湘潭市', // name: '湘潭市',
value: [112.95, 27.83], // value: [112.95, 27.83],
}, // },
{ // {
name: '株洲市', // name: '株洲市',
value: [113.13, 27.83], // value: [113.13, 27.83],
}, // },
{ // {
name: '湘西土家族苗族自治州', // name: '湘西土家族苗族自治州',
value: [109.67, 28.22], // value: [109.67, 28.22],
}, // },
{ // {
name: '衡阳市', // name: '衡阳市',
value: [112.57, 26.89], // value: [112.57, 26.89],
}, // },
{ // {
name: '永州市', // name: '永州市',
value: [111.61, 26.42], // value: [111.61, 26.42],
}, // },
{ // {
name: '郴州市', // name: '郴州市',
value: [113.02, 25.77], // value: [113.02, 25.77],
}, // },
] ]

152
src/views/page/indexMim.vue
View File

@ -186,7 +186,6 @@ import {JsonResult} from '@/axios'
import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick} from 'vue' import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick} from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import api from '@/axios' import api from '@/axios'
import {fa} from 'element-plus/es/locale'
const {proxy} = getCurrentInstance() as any const {proxy} = getCurrentInstance() as any
const day = proxy.day const day = proxy.day
onMounted(() => { onMounted(() => {
@ -698,6 +697,7 @@ const initMapdt = (data: any, podat: any, name: any) => {
map: 'myMap', map: 'myMap',
geoIndex: 0, //geoIndex：第一个图层 geoIndex: 0, //geoIndex：第一个图层
tooltip: { tooltip: {
show: true,
trigger: 'item', trigger: 'item',
backgroundColor: 'rgba(0,0,0,0)', backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)', borderColor: 'rgba(0,0,0,0)',
@ -754,60 +754,110 @@ const initMapdt = (data: any, podat: any, name: any) => {
}, },
data: [] as any[] // 添加与你的数据相关联的数据 data: [] as any[] // 添加与你的数据相关联的数据
}, },
{ // {
type: 'lines', // 飞线图 // type: 'lines', // 飞线图
tooltip: { // tooltip: {
show: false // 禁用飞线的 tooltip // show: false // 禁用飞线的 tooltip
}, // },
zlevel: 2, // zlevel: 2,
effect: { // effect: {
show: true, // show: true,
period: 3, //箭头指向速度，值越小速度越快 // period: 3, //箭头指向速度，值越小速度越快
trailLength: 0.03, //特效尾迹长度[0,1]值越大，尾迹越长重 // trailLength: 0.03, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标 // symbol: 'arrow', //箭头图标
symbolSize: 6 //图标大小 // symbolSize: 6 //图标大小
}, // },
lineStyle: { // lineStyle: {
color: '#EE5652', // color: '#EE5652',
width: 1, //尾迹线条宽度 // width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度 // opacity: 1, //尾迹线条透明度
curveness: 0.3 //尾迹线条曲直度 // curveness: 0.3 //尾迹线条曲直度
}, // },
data: linesData, // data: linesData,
symbol: ['none', 'circle'], //飞线起点终点点位样式 // symbol: ['none', 'circle'], //飞线起点终点点位样式
symbolSize: 10 // 飞线起点终点点位大小 // symbolSize: 10 // 飞线起点终点点位大小
}, // },
{ // {
// 散点图 // // 散点图
type: 'effectScatter', //在地图上绘制具有动态效果的散点图,实现视觉上的效果，比如涟漪效果或闪烁效果 // type: 'effectScatter', //在地图上绘制具有动态效果的散点图,实现视觉上的效果，比如涟漪效果或闪烁效果
zlevel: 3, //图层的深度，值越大表示图层越高，覆盖在其他图层之上。通常用于分层显示效果 // zlevel: 3, //图层的深度，值越大表示图层越高，覆盖在其他图层之上。通常用于分层显示效果
coordinateSystem: 'geo', // coordinateSystem: 'geo',
tooltip: { // tooltip: {
show: false // 禁用散点的 tooltip // show: false, // 禁用散点的 tooltip
}, // trigger: 'item',
data: effectScatterData, // backgroundColor: 'rgba(0,0,0,0)',
symbol: 'circle', // 设置散点的图形为圆形 // borderColor: 'rgba(0,0,0,0)',
symbolSize: [10, 10], // 设置散点的大小，宽度为 20，高度为 10 // extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);',
itemStyle: { // textStyle: {fontSize: '16', color: '#fff'},
color: 'orange', // 散点颜色设置为橙色 // formatter: function (params: any) {
shadowBlur: 10, // 设置散点的阴影模糊大小 // let datat = podat
shadowColor: 'orange' // 阴影颜色为橙色 // let itemWithId2 = datat.children.find((item: any) => item.grope === params.name)
}, // if (!itemWithId2) {
effectType: 'ripple', //动画效果类型设置为涟漪效果，即散点会呈现出波纹扩散的效果 // return `
// showEffectOn:emphasis移入显示动画，render一开始显示动画 // <div style="
// showEffectOn:render: 表示在图表渲染时立即显示动画效果 // background: url('/keji_border.png') no-repeat center center;
showEffectOn: 'render', // background-size: contain;
rippleEffect: { // height: 150px;
scale: 5, // 涟漪效果的扩展倍数，越大波纹越大 // width: 300px;
brushType: 'stroke' // 涟漪效果的绘制方式，stroke 表示仅绘制波纹的边框，不填充 // display: flex;
} // flex-direction: column;
} // justify-content: center;
// align-items: center;
// color: #fff;
// padding: 10px;
// box-sizing: border-box;
// ">
// 报警: 0<br />
// 警情: 0<br />
// AI预警: 0
// </div>
// `
// } else {
// return `
// <div style="
// background: url('/keji_border.png') no-repeat center center;
// background-size: contain;
// height: 150px;
// width: 300px;
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// color: #fff;
// padding: 10px;
// box-sizing: border-box;
// ">
// 报警: ${itemWithId2.alarmCount}<br />
// 警情: ${itemWithId2.caseCount}<br />
// AI预警: ${itemWithId2.aiCount}
// </div>
// `
// }
// }
// },
// data: effectScatterData,
// symbol: 'circle', // 设置散点的图形为圆形
// symbolSize: [10, 10], // 设置散点的大小，宽度为 20，高度为 10
// itemStyle: {
// color: 'orange', // 散点颜色设置为橙色
// shadowBlur: 10, // 设置散点的阴影模糊大小
// shadowColor: 'orange' // 阴影颜色为橙色
// },
// effectType: 'ripple', //动画效果类型设置为涟漪效果，即散点会呈现出波纹扩散的效果
// // showEffectOn:emphasis移入显示动画，render一开始显示动画
// // showEffectOn:render: 表示在图表渲染时立即显示动画效果
// showEffectOn: 'render',
// rippleEffect: {
// scale: 5, // 涟漪效果的扩展倍数，越大波纹越大
// brushType: 'stroke' // 涟漪效果的绘制方式，stroke 表示仅绘制波纹的边框，不填充
// }
// }
] ]
} }
if (name !== '湖南省') { if (name !== '湖南省') {
// option.series = option.series.filter((series) => series.type !== 'lines') // option.series = option.series.filter((series) => series.type !== 'lines')
option.series[1].data = [] // option.series[1].data = []
option.series[2].data = [] // option.series[2].data = []
myChart.setOption(option) myChart.setOption(option)
} else { } else {
myChart.setOption(option) myChart.setOption(option)