diff --git a/src/components/echarts/MyEchart.vue b/src/components/echarts/MyEchart.vue index 90442ca..fd0094f 100644 --- a/src/components/echarts/MyEchart.vue +++ b/src/components/echarts/MyEchart.vue @@ -11,7 +11,7 @@ const chartRef = ref() const props = defineProps(['options']) let chart: echarts.ECharts | null = null const resizeHandler = () => { - chart?.resize() + chart?.resize() } const initChart = () => { chart?.dispose() @@ -19,15 +19,14 @@ const initChart = () => { chart = echarts.init(chartRef.value as HTMLDivElement) chart.setOption({ title: { - ...props.options.title, left: 'center', textStyle: { color: '#000', fontSize: 18 - } + }, + ...props.options.title }, tooltip: { - ...(props.options.tooltip || null), trigger: 'axis', axisPointer: { @@ -44,10 +43,10 @@ const initChart = () => { fontSize: 14 }, backgroundColor: 'rgba(0,0,0,0.35)', - borderWidth: 0 + borderWidth: 0, + ...(props.options.tooltip || null) }, legend: { - ...(props.options.xAxis.legend || null), right: 20, top: 0, itemGap: 10, @@ -57,7 +56,8 @@ const initChart = () => { padding: [2, 0, 0, 0] //[上、右、下、左] }, itemWidth: 15, - itemHeight: 10 + itemHeight: 10, + ...(props.options.legend || null) }, grid: { @@ -65,12 +65,10 @@ const initChart = () => { left: '10px', right: '40px', bottom: '40px', - containLabel: true }, xAxis: [ { - ...(props.options.xAxis || null), type: 'category', axisTick: { show: false }, axisLine: { @@ -84,12 +82,13 @@ const initChart = () => { color: '#000', fontSize: '12' } - } + }, + ...(props.options.xAxis || null) } ], yAxis: [ { - ...(props.options.yAxis || null), + type: 'value', nameTextStyle: { @@ -113,7 +112,8 @@ const initChart = () => { type: 'dashed', opacity: 0.5 } - } + }, + ...(props.options.yAxis || null), } ], dataZoom: [ diff --git a/src/components/echarts/MyEchartMap.vue b/src/components/echarts/MyEchartMap.vue index 1f6c54b..ad6a691 100644 --- a/src/components/echarts/MyEchartMap.vue +++ b/src/components/echarts/MyEchartMap.vue @@ -1,25 +1,18 @@ diff --git a/src/views/Event-boot/Region/distribution.vue b/src/views/Event-boot/Region/distribution.vue index 9f815e0..9387300 100644 --- a/src/views/Event-boot/Region/distribution.vue +++ b/src/views/Event-boot/Region/distribution.vue @@ -23,7 +23,7 @@
- + 1231 @@ -36,7 +36,9 @@ import { useDictData } from '@/stores/dictData' import MyEchartMap from '@/components/echarts/MyEchartMap.vue' import { ref, reactive, onMounted, provide } from 'vue' const options = ref([]) +const echartList = ref({}) const deptIndex = ref('') + const DictData = useDictData() const formInline = reactive({ deptIndex: '5699e5916a18a6381e1ac92da5bd2628', @@ -51,9 +53,108 @@ const info = () => { } const onSubmit = () => { - getAreaLineDetail(formInline) - .then(res => {}) - .catch(err => {}) + getAreaLineDetail(formInline).then(res => { + echartList.value = { + title: { + text: '监测网分布' //+ "(" + _this.titles + ")", + }, + tooltip: { + formatter: function (params: any) { + //console.log(params) + var tips = '' + if (params.value == 0) { + tips = "暂无数据
" + } else { + tips += + " " + + params.name + + '
区域暂降评估' + + ":" + + params.value + + '
' + } + return tips + } + }, + color: ['green', 'red'], + legend: { + data: [ + { + name: '正常' + }, + { + name: '中断' + } + ] + }, + options: { + series: [] + } + } + let mapList = [[], [], []] + if (res.data.substationDetailVOList != null) { + res.data.substationDetailVOList.forEach((item: any) => { + if (item.color == 'green') { + mapList[0].push(item) + } else if (item.color == 'red') { + mapList[1].push(item) + } + }) + } + mapList.forEach((item, ind) => { + echartList.value.options.series.push({ + type: 'scatter', + mapName: 'china', + name: ind == 0 ? '正常' : ind == 1 ? '中断' : '变电站', + coordinateSystem: 'geo', + geoIndex: 0, + animation: false, //坐标点是否显示动画 + roam: true, + symbol: 'pin', + symbolSize: function () { + //坐标点大小 + return 30 + }, + label: { + normal: { + show: false + }, + emphasis: { + show: false + } + }, + data: item.map(function (itemOpt: any) { + // console.log(itemOpt); + return { + name: itemOpt.srbName, + value: [ + parseFloat(itemOpt.coordY), //经度 + parseFloat(itemOpt.coordX) //维度 + ], + + itemStyle: { + //地图区域的多边形 + normal: { + color: itemOpt.color, //坐标点颜色 + shadowBlur: 0, // 图形阴影的模糊大小 + shadowOffsetX: 0 // 阴影水平方向上的偏移距离。 + } + }, + tooltip: { + //仅在 options中最外层的 tooltip.trigger 为 'item'时有效 + position: 'bottom', //提示框位置,仅在 options中最外层的 tooltip.trigger 为 'item'时有效 + formatter: function (params: any, ticket: any, callback: any) { + var strHtml = '
变电站:' + itemOpt.subName + '
' + '监测点:' + itemOpt.srbName + + strHtml += '
' + return strHtml + } + } + } + }) + }) + }) + }) } onMounted(() => {