|
|
@@ -0,0 +1,222 @@
|
|
|
+<template>
|
|
|
+ <div shadow="never" class="homeBox">
|
|
|
+ <div class="chart" ref="lineChartBanlance" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+/*----------------------------------依赖引入-----------------------------------*/
|
|
|
+import * as echarts from 'echarts'
|
|
|
+import { ElMessage, ElNotification } from 'element-plus'
|
|
|
+import {
|
|
|
+ ref,
|
|
|
+ onMounted,
|
|
|
+ watch,
|
|
|
+ getCurrentInstance,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+} from 'vue'
|
|
|
+/*----------------------------------接口引入-----------------------------------*/
|
|
|
+/*----------------------------------组件引入-----------------------------------*/
|
|
|
+/*----------------------------------store引入-----------------------------------*/
|
|
|
+/*----------------------------------公共方法引入-----------------------------------*/
|
|
|
+/*----------------------------------公共变量-----------------------------------*/
|
|
|
+const props = defineProps({
|
|
|
+ height: Number,
|
|
|
+ chartData: Object,
|
|
|
+}) //数据双向绑定
|
|
|
+/*----------------------------------变量声明-----------------------------------*/
|
|
|
+let lineChartBanlance = ref(null)
|
|
|
+
|
|
|
+function initEcharts() {
|
|
|
+ const data = {
|
|
|
+ name: '盛齐充电站',
|
|
|
+ capacity: 2500,
|
|
|
+ power: 155.46,
|
|
|
+ progress: 24.7,
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ name: 'D4KXG_C1',
|
|
|
+ capacity: 152,
|
|
|
+ power: '--',
|
|
|
+ progress: 36,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'D4KXG_C2',
|
|
|
+ capacity: 152,
|
|
|
+ power: '--',
|
|
|
+ progress: 36.8,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'D4KXG_C5',
|
|
|
+ capacity: 38,
|
|
|
+ power: '--',
|
|
|
+ progress: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'D5KXG_C1',
|
|
|
+ capacity: 152,
|
|
|
+ power: '--',
|
|
|
+ progress: 20.5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'D5KXG_C1',
|
|
|
+ capacity: 152,
|
|
|
+ power: '--',
|
|
|
+ progress: 20.5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'D5KXG_C1',
|
|
|
+ capacity: 152,
|
|
|
+ power: '--',
|
|
|
+ progress: 20.5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+
|
|
|
+ let myChart = echarts.init(lineChartBanlance.value)
|
|
|
+ // 绘制图表
|
|
|
+ myChart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ triggerOn: 'mousemove',
|
|
|
+ formatter: function (params) {
|
|
|
+ const item = params.data
|
|
|
+
|
|
|
+ if ('children' in item) {
|
|
|
+ return `
|
|
|
+ <div style="font-weight:bold;">${item.name}</div>
|
|
|
+ <div>功率：${item.power}kW</div>
|
|
|
+ <div>负载率：${item.progress}%</div>
|
|
|
+ <div>额定容量：${item.capacity}kVA</div>
|
|
|
+ `
|
|
|
+ } else {
|
|
|
+ return `
|
|
|
+ <div style="font-weight:bold;">${item.name}</div>
|
|
|
+ <div>功率：${item.power}kW</div>
|
|
|
+ <div>负载率：${item.progress}%</div>
|
|
|
+ <div>额定电压：${1}kV</div>
|
|
|
+ <div>额定容量：${item.capacity}kVA</div>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'tree',
|
|
|
+ data: [data],
|
|
|
+ top: '1%',
|
|
|
+ left: '30%',
|
|
|
+ bottom: '1%',
|
|
|
+ right: '30%',
|
|
|
+ symbolSize: 7,
|
|
|
+ label: {
|
|
|
+ position: 'left',
|
|
|
+ verticalAlign: 'middle',
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 16,
|
|
|
+ padding: 15,
|
|
|
+ backgroundColor: '#354353',
|
|
|
+ borderRadius: 5,
|
|
|
+ formatter: function (params) {
|
|
|
+ const node = params.data
|
|
|
+
|
|
|
+ const barTotal = 20 // 进度条总长度（字符数）
|
|
|
+ const barDone = Math.floor(barTotal * (node.progress / 100))
|
|
|
+ const barRest = barTotal - barDone
|
|
|
+
|
|
|
+ var res =
|
|
|
+ `{name|${node.name}} {capacity|${node.capacity}kVA} {power|${node.power}kW}\n\n` +
|
|
|
+ `{bar|${'■'.repeat(barDone)}${'□'.repeat(barRest)}}{percent|${node.progress}%}`
|
|
|
+ return res
|
|
|
+ },
|
|
|
+ // 富文本样式（关键！区分不同文本块）
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: '#fff',
|
|
|
+ },
|
|
|
+ capacity: {
|
|
|
+ fontSize: 16,
|
|
|
+ padding: [1, 10, 0, 20],
|
|
|
+ },
|
|
|
+ power: {
|
|
|
+ fontSize: 16,
|
|
|
+ color: '#5ebddd',
|
|
|
+ padding: [1, 10, 0, 0],
|
|
|
+ },
|
|
|
+ bar: {
|
|
|
+ color: '#0f0',
|
|
|
+ // backgroundColor: '#fff',
|
|
|
+ height: 16,
|
|
|
+ borderRadius: 8,
|
|
|
+ padding: [0, 2],
|
|
|
+ lineHeight: 16,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ },
|
|
|
+ percent: {
|
|
|
+ color: '#0f0',
|
|
|
+ fontSize: 14,
|
|
|
+ padding: [0, 5],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2,
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: 'rgba(0,0,0,0.2)',
|
|
|
+ },
|
|
|
+ leaves: {
|
|
|
+ label: {
|
|
|
+ position: 'right',
|
|
|
+ verticalAlign: 'middle',
|
|
|
+ align: 'left',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: 'descendant',
|
|
|
+ label: { show: true },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#ffd700',
|
|
|
+ borderWidth: 3,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ expandAndCollapse: true,
|
|
|
+ animationDuration: 550,
|
|
|
+ animationDurationUpdate: 750,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ })
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ myChart.resize()
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function writeValue(val) {
|
|
|
+ // getData()
|
|
|
+ initEcharts()
|
|
|
+}
|
|
|
+
|
|
|
+//监听变化
|
|
|
+watch(
|
|
|
+ () => props.chartData,
|
|
|
+ (newVal, oldVal, clear) => {
|
|
|
+ // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
|
|
|
+ clear(() => clearTimeout(writeValue(newVal, oldVal)))
|
|
|
+ },
|
|
|
+ { lazy: true }
|
|
|
+)
|
|
|
+
|
|
|
+// 暴露变量
|
|
|
+defineExpose({
|
|
|
+ initEcharts,
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.homeBox {
|
|
|
+ .chart {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
fanghuisheng