diff --git a/src/views/lll/NYJCD.vue b/src/views/lll/NYJCD.vue index 6355454..9d0c5b4 100644 --- a/src/views/lll/NYJCD.vue +++ b/src/views/lll/NYJCD.vue @@ -23,7 +23,6 @@ 配电室 -
{ - // const item = params[1]; - // return item.name + " : " + item.value + " 个"; - // }, + // // formatter: function (params) { + // // const item = params[1] + // // return item.name + ' : ' + item.value + // // } // }, grid: { - left: "1%", - right: "0%", - top: "16%", - bottom: "5%", + left: "3%", + right: "4%", + bottom: "3%", containLabel: true, }, xAxis: { type: "category", data: xaxisData, - axisLine: { + axisLabel: { show: true, - // lineStyle: { - // width: 1, - // }, + textStyle: { + color: "#fff", + fontSize: 20, + }, + interval: 0, //代表显示所有x轴标签显示 }, axisTick: { show: true, }, - axisLabel: { - fontSize: 20, - color: "#FFFFFF", - }, }, yAxis: { type: "value", + splitArea: false, name: "单位:kWh", nameTextStyle: { color: "#fff", fontSize: 20, + padding: 10, + }, + axisLine: { + show: false, + lineStyle: { + width: 2, + color: "#CEDDF2", + }, }, splitLine: { show: true, + lineStyle: { + color: "#2A353F", + type: "dashed", + }, + }, + axisTick: { + show: false, }, axisLabel: { - fontSize: 20, - color: "#FFFFFF", + show: true, + textStyle: { + color: "#fff", + fontSize: 20, + }, + interval: 0, //代表显示所有x轴标签显示 }, }, series: [ { - type: "bar", - itemStyle: { - color: "transparent", + type: "custom", + name: "昨日", + markPoint: { + data: [ + { + type: "max", + name: "Max", + symbolOffset: [-20, 0], + itemStyle: { + color: "transparent", // 标注点颜色 + }, + // label 用于设置标注点上的文本标签样式 + label: { + color: "#0BE73B", // 文本颜色 + fontSize: 25, + }, + }, + ], + }, + renderItem: (params, api) => { + const location = api.coord([api.value(0), api.value(1)]); + return { + type: "group", + x: -20, + children: [ + { + type: "CubeLeft", + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]), + }, + style: { + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#09E63A", + }, + { + offset: 1, + color: "#39E7C7", + }, + ]), + }, + }, + { + type: "CubeRight", + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]), + }, + style: { + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#00C35A", + }, + { + offset: 1, + color: "#09C379", + }, + ]), + }, + }, + { + type: "CubeTop", + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]), + }, + style: { + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#05E6A5", + }, + { + offset: 1, + color: "#12DE63", + }, + ]), + }, + }, + ], + }; }, data: yaxisData, - label: { - normal: { - show: true, - position: "top", - formatter: (e) => { - return e.value === maxValue ? e.value : ""; - }, - fontSize: 20, - color: "#02C262", - offset: [0, -15], - }, - }, }, - { - type: "bar", - itemStyle: { - color: "transparent", - }, - data: yaxisData2, - label: { - normal: { - show: true, - position: "top", - formatter: (e) => { - return e.value === maxValue2 ? e.value : ""; - }, - fontSize: 20, - color: "#3286FF", - offset: [0, -15], - }, - }, - }, - { type: "custom", name: "今日", + markPoint: { + data: [ + { + type: "max", + name: "Max", + symbolOffset: [25, 0], + itemStyle: { + color: "transparent", // 标注点颜色 + }, + // label 用于设置标注点上的文本标签样式 + label: { + color: "#24BDF2", // 文本颜色 + fontSize: 25, + }, + }, + ], + }, renderItem: (params, api) => { const location = api.coord([api.value(0), api.value(1)]); - const xAxisPoint = api.coord([api.value(0), 0]); - const distance = 50; return { type: "group", + x: 30, children: [ { type: "CubeLeft", @@ -682,23 +770,19 @@ export default { api, xValue: api.value(0), yValue: api.value(1), - x: location[0] - distance, + x: location[0], y: location[1], - xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]], + xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: "#10C6FF", - }, - { - offset: 0.35, - color: "#377DFF", + color: "#4567FF", }, { offset: 1, - color: "#4464FF", + color: "#0CC7FA", }, ]), }, @@ -709,23 +793,19 @@ export default { api, xValue: api.value(0), yValue: api.value(1), - x: location[0] - distance, + x: location[0], y: location[1], - xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]], + xAxisPoint: api.coord([api.value(0), 0]), }, style: { fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, - color: "#0673D5", - }, - { - offset: 0.35, - color: "#0B68D5", + color: "#115DD5", }, { offset: 1, - color: "#115DD5", + color: "#0574D0", }, ]), }, @@ -736,12 +816,21 @@ export default { api, xValue: api.value(0), yValue: api.value(1), - x: location[0] - distance, + x: location[0], y: location[1], - xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]], + xAxisPoint: api.coord([api.value(0), 0]), }, style: { - fill: "#0964FF", + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#0D7FFB", + }, + { + offset: 1, + color: "#0440EB", + }, + ]), }, }, ], @@ -749,91 +838,8 @@ export default { }, data: yaxisData2, }, - { - type: "custom", - name: "昨日", - barCategoryGap: "20%", - renderItem: (params, api) => { - const location = api.coord([api.value(0), api.value(1)]); - return { - type: "group", - children: [ - { - type: "CubeLeft", - shape: { - api, - xValue: api.value(0), - yValue: api.value(1), - x: location[0], - y: location[1], - xAxisPoint: api.coord([api.value(0), 0]), - }, - style: { - fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "#08E83C", - }, - { - offset: 0.35, - color: "#1FE77D", - }, - { - offset: 1, - color: "#38E7C5", - }, - ]), - }, - }, - { - type: "CubeRight", - shape: { - api, - xValue: api.value(0), - yValue: api.value(1), - x: location[0], - y: location[1], - xAxisPoint: api.coord([api.value(0), 0]), - }, - style: { - fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: "#00C25D", - }, - { - offset: 0.35, - color: "#05C269", - }, - { - offset: 1, - color: "#0BC27B", - }, - ]), - }, - }, - { - type: "CubeTop", - shape: { - api, - xValue: api.value(0), - yValue: api.value(1), - x: location[0], - y: location[1], - xAxisPoint: api.coord([api.value(0), 0]), - }, - style: { - fill: "#05E861", - }, - }, - ], - }; - }, - data: yaxisData, - }, ], }; - this.defineEcharts("pdsydl", option); }, // 监听鼠标事件,实现饼图选中效果(单选),近似实现高亮(放大)效果。