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);
},
// 监听鼠标事件,实现饼图选中效果(单选),近似实现高亮(放大)效果。