liulonglong
/
shuinichang_
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

12

This commit is contained in:
lll 2023-12-07 10:56:49 +08:00
parent a9a76d8c9c
commit a6caa1ea6b
3 changed files with 193 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/lll/NYJCD.vue
View File

@ -479,18 +479,20 @@ export default {
echarts.graphic.registerShape("CubeTop", CubeTop); echarts.graphic.registerShape("CubeTop", CubeTop);
const option = { const option = {
// legend: { legend: {
// data: [ data: [
// { {
// name: "余热发电量", name: "余热发电量",
// icon: require("../../assets/nyjc/今日.png"), textStyle: {
// textStyle: { color: "white",
// color: "white", fontSize: 20,
// fontSize: 20, },
// }, itemStyle: {
// }, color: "#0DFC4A", // 图例图标的颜色
// ], },
// }, },
],
},
// tooltip: { // tooltip: {
// trigger: "axis", // trigger: "axis",
// axisPointer: { // axisPointer: {
@ -559,8 +561,8 @@ export default {
}, },
series: [ series: [
{ {
type: "custom",
name: "余热发电量", name: "余热发电量",
type: "custom",
markPoint: { markPoint: {
data: [ data: [
{ {
@ -582,7 +584,6 @@ export default {
const location = api.coord([api.value(0), api.value(1)]); const location = api.coord([api.value(0), api.value(1)]);
return { return {
type: "group", type: "group",
x: -20,
children: [ children: [
{ {
type: "CubeLeft", type: "CubeLeft",

175
src/views/lll/NYJCM.vue
View File

@ -495,10 +495,13 @@ export default {
}, },
//月用煤量 3d //月用煤量 3d
yysl() { yysl() {
const offsetX = 24; //bar宽 let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
const offsetY = 8; //倾斜角度 let yaxisData = [90, 80, 100, 70, 65];
const offsetX = 20;
const offsetY = 10;
// 绘制左侧面 // 绘制左侧面
const CubeLeft = this.$echarts.graphic.extendShape({ const CubeLeft = echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
@ -520,7 +523,7 @@ export default {
}, },
}); });
// 绘制右侧面 // 绘制右侧面
const CubeRight = this.$echarts.graphic.extendShape({ const CubeRight = echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
@ -540,16 +543,15 @@ export default {
}, },
}); });
// 绘制顶面 // 绘制顶面
const CubeTop = this.$echarts.graphic.extendShape({ const CubeTop = echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
}, },
buildPath: function (ctx, shape) { buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y]; const c1 = [shape.x, shape.y];
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点 const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
// const c3 = [shape.x, shape.y - offsetX]; const c3 = [shape.x, shape.y - offsetX];
const c3 = [shape.x, shape.y - offsetY * 2];
const c4 = [shape.x - offsetX, shape.y - offsetY]; const c4 = [shape.x - offsetX, shape.y - offsetY];
ctx ctx
.moveTo(c1[0], c1[1]) .moveTo(c1[0], c1[1])
@ -560,75 +562,78 @@ export default {
}, },
}); });
// 注册三个面图形 // 注册三个面图形
this.$echarts.graphic.registerShape("CubeLeft", CubeLeft); echarts.graphic.registerShape("CubeLeft", CubeLeft);
this.$echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeRight", CubeRight);
this.$echarts.graphic.registerShape("CubeTop", CubeTop); echarts.graphic.registerShape("CubeTop", CubeTop);
let xAxisData = ["1月", "2月", "3月", "4月", "5月"];
let seriesData = [100, 200, 300, 400, 300];
//拿到最大值
const maxValue = Math.max(...seriesData);
let colorArr = [ const option = {
["#0A67FF"], legend: {
["#10C6FF", "rgba(60,113,255,1)"], data: [
["#0774D6", "rgba(17,94,213,1)"], {
]; name: "月用煤量",
let option = { textStyle: {
// legend: { color: "white",
// data: [ fontSize: 20,
// { },
// icon: "rect", itemStyle: {
// name: "炭排放量", color: "#0E62D5", // 图例图标的颜色
// }, },
// ], },
// textStyle: { ],
// color: "#fff",
// fontSize: "20px",
// },
// },
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params, ticket, callback) {
const item = params[1];
return item.name + " : " + item.value;
},
}, },
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// },
// // formatter: function (params) {
// // const item = params[1]
// // return item.name + ' : ' + item.value
// // }
// },
grid: { grid: {
// 让图表占满容器 left: "3%",
left: "5%", right: "4%",
right: "5%", bottom: "3%",
bottom: "0%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xAxisData, data: xaxisData,
axisLine: { axisLabel: {
show: true, show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
}, },
axisTick: { axisTick: {
show: false, show: true,
},
axisLabel: {
fontSize: 20,
color: "#fff",
margin: 15,
}, },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "单位:t", splitArea: false,
name: "单位:kWh",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 20, fontSize: 20,
padding: 10, padding: 10,
}, },
axisLine: {
show: false,
lineStyle: {
width: 2,
color: "#CEDDF2",
},
},
splitLine: { splitLine: {
show: true, show: true,
lineStyle: {}, lineStyle: {
color: "#2A353F",
type: "dashed",
},
}, },
axisTick: { axisTick: {
show: false, show: false,
@ -639,13 +644,30 @@ export default {
color: "#fff", color: "#fff",
fontSize: 20, fontSize: 20,
}, },
interval: 0, //代表显示所有x轴标签显示
}, },
// boundaryGap: ['20%', '20%'],
}, },
series: [ series: [
{ {
name: "月用煤量",
type: "custom", type: "custom",
name: "炭排放量", markPoint: {
data: [
{
type: "max",
name: "Max",
symbolOffset: [25, 0],
itemStyle: {
color: "transparent", // 标注点颜色
},
// label 用于设置标注点上的文本标签样式
label: {
color: "#3F71FE", // 文本颜色
fontSize: 25,
},
},
],
},
renderItem: (params, api) => { renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]); const location = api.coord([api.value(0), api.value(1)]);
return { return {
@ -665,11 +687,11 @@ export default {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: colorArr[1][0], color: "#4567FF",
}, },
{ {
offset: 1, offset: 1,
color: colorArr[1][1], color: "#0CC7FA",
}, },
]), ]),
}, },
@ -688,11 +710,11 @@ export default {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: colorArr[2][0], color: "#115DD5",
}, },
{ {
offset: 1, offset: 1,
color: colorArr[2][1], color: "#0574D0",
}, },
]), ]),
}, },
@ -711,11 +733,11 @@ export default {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: colorArr[0][0], color: "#0D7FFB",
}, },
{ {
offset: 1, offset: 1,
color: colorArr[0][0], color: "#0440EB",
}, },
]), ]),
}, },
@ -723,27 +745,7 @@ export default {
], ],
}; };
}, },
data: seriesData, data: yaxisData,
},
{
type: "bar",
label: {
normal: {
show: true,
position: "top",
formatter: (e) => {
return e.value === maxValue ? e.value : "";
},
fontSize: 20,
color: "#11C3FF",
offset: [0, -15],
},
},
itemStyle: {
color: "transparent",
},
tooltip: {},
data: seriesData,
}, },
], ],
}; };
@ -765,7 +767,8 @@ export default {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: transparent; background-color: transparent;
background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png); background-image: url(../../assets/img/左遮罩.png),
url(../../assets/img/右遮罩.png);
display: flex; display: flex;
padding-top: 400px; padding-top: 400px;
justify-content: space-between; justify-content: space-between;

175
src/views/lll/NYJCS.vue
View File

@ -425,10 +425,13 @@ export default {
}, },
//月用水量 //月用水量
yysl() { yysl() {
const offsetX = 24; //bar宽 let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
const offsetY = 8; //倾斜角度 let yaxisData = [90, 80, 100, 70, 65];
const offsetX = 20;
const offsetY = 10;
// 绘制左侧面 // 绘制左侧面
const CubeLeft = this.$echarts.graphic.extendShape({ const CubeLeft = echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
@ -450,7 +453,7 @@ export default {
}, },
}); });
// 绘制右侧面 // 绘制右侧面
const CubeRight = this.$echarts.graphic.extendShape({ const CubeRight = echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
@ -470,16 +473,15 @@ export default {
}, },
}); });
// 绘制顶面 // 绘制顶面
const CubeTop = this.$echarts.graphic.extendShape({ const CubeTop = echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
}, },
buildPath: function (ctx, shape) { buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y]; const c1 = [shape.x, shape.y];
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点 const c2 = [shape.x + offsetX, shape.y - offsetY]; // 右点
// const c3 = [shape.x, shape.y - offsetX]; const c3 = [shape.x, shape.y - offsetX];
const c3 = [shape.x, shape.y - offsetY * 2];
const c4 = [shape.x - offsetX, shape.y - offsetY]; const c4 = [shape.x - offsetX, shape.y - offsetY];
ctx ctx
.moveTo(c1[0], c1[1]) .moveTo(c1[0], c1[1])
@ -490,75 +492,78 @@ export default {
}, },
}); });
// 注册三个面图形 // 注册三个面图形
this.$echarts.graphic.registerShape("CubeLeft", CubeLeft); echarts.graphic.registerShape("CubeLeft", CubeLeft);
this.$echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeRight", CubeRight);
this.$echarts.graphic.registerShape("CubeTop", CubeTop); echarts.graphic.registerShape("CubeTop", CubeTop);
let xAxisData = ["1月", "2月", "3月", "4月", "5月"];
let seriesData = [100, 200, 300, 400, 300];
//拿到最大值
const maxValue = Math.max(...seriesData);
let colorArr = [ const option = {
["#0A67FF"], legend: {
["#10C6FF", "rgba(60,113,255,1)"], data: [
["#0774D6", "rgba(17,94,213,1)"], {
]; name: "月用水量",
let option = { textStyle: {
// legend: { color: "white",
// data: [ fontSize: 20,
// { },
// icon: "rect", itemStyle: {
// name: "炭排放量", color: "#0E62D5", // 图例图标的颜色
// }, },
// ], },
// textStyle: { ],
// color: "#fff",
// fontSize: "20px",
// },
// },
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params, ticket, callback) {
const item = params[1];
return item.name + " : " + item.value;
},
}, },
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// },
// // formatter: function (params) {
// // const item = params[1]
// // return item.name + ' : ' + item.value
// // }
// },
grid: { grid: {
// 让图表占满容器 left: "3%",
left: "5%", right: "4%",
right: "5%", bottom: "3%",
bottom: "0%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xAxisData, data: xaxisData,
axisLine: { axisLabel: {
show: true, show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
}, },
axisTick: { axisTick: {
show: false, show: true,
},
axisLabel: {
fontSize: 20,
color: "#fff",
margin: 15,
}, },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "单位:t", splitArea: false,
name: "单位:kWh",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 20, fontSize: 20,
padding: 10, padding: 10,
}, },
axisLine: {
show: false,
lineStyle: {
width: 2,
color: "#CEDDF2",
},
},
splitLine: { splitLine: {
show: true, show: true,
lineStyle: {}, lineStyle: {
color: "#2A353F",
type: "dashed",
},
}, },
axisTick: { axisTick: {
show: false, show: false,
@ -569,13 +574,30 @@ export default {
color: "#fff", color: "#fff",
fontSize: 20, fontSize: 20,
}, },
interval: 0, //代表显示所有x轴标签显示
}, },
// boundaryGap: ['20%', '20%'],
}, },
series: [ series: [
{ {
name: "月用水量",
type: "custom", type: "custom",
name: "炭排放量", markPoint: {
data: [
{
type: "max",
name: "Max",
symbolOffset: [0, 0],
itemStyle: {
color: "transparent", // 标注点颜色
},
// label 用于设置标注点上的文本标签样式
label: {
color: "#3F71FE", // 文本颜色
fontSize: 25,
},
},
],
},
renderItem: (params, api) => { renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]); const location = api.coord([api.value(0), api.value(1)]);
return { return {
@ -595,11 +617,11 @@ export default {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: colorArr[1][0], color: "#4567FF",
}, },
{ {
offset: 1, offset: 1,
color: colorArr[1][1], color: "#0CC7FA",
}, },
]), ]),
}, },
@ -618,11 +640,11 @@ export default {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: colorArr[2][0], color: "#115DD5",
}, },
{ {
offset: 1, offset: 1,
color: colorArr[2][1], color: "#0574D0",
}, },
]), ]),
}, },
@ -641,11 +663,11 @@ export default {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: colorArr[0][0], color: "#0D7FFB",
}, },
{ {
offset: 1, offset: 1,
color: colorArr[0][0], color: "#0440EB",
}, },
]), ]),
}, },
@ -653,27 +675,7 @@ export default {
], ],
}; };
}, },
data: seriesData, data: yaxisData,
},
{
type: "bar",
label: {
normal: {
show: true,
position: "top",
formatter: (e) => {
return e.value === maxValue ? e.value : "";
},
fontSize: 20,
color: "#11C3FF",
offset: [0, -15],
},
},
itemStyle: {
color: "transparent",
},
tooltip: {},
data: seriesData,
}, },
], ],
}; };
@ -695,7 +697,8 @@ export default {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: transparent; background-color: transparent;
background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png); background-image: url(../../assets/img/左遮罩.png),
url(../../assets/img/右遮罩.png);
display: flex; display: flex;
padding-top: 400px; padding-top: 400px;
justify-content: space-between; justify-content: space-between;