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

Compare commits

base: liulonglong:a6caa1ea6ba3254bf049174f95b40d5a305a7f2a
Branches Tags
liulonglong:master
..
compare: liulonglong:dcece1e2f9bb99538b79b693bd14d5047e5943e6
Branches Tags
liulonglong:master

No commits in common. "a6caa1ea6ba3254bf049174f95b40d5a305a7f2a" and "dcece1e2f9bb99538b79b693bd14d5047e5943e6" have entirely different histories.
a6caa1ea6b ... dcece1e2f9

10 changed files with 524 additions and 555 deletions
Show Stats Expand all files Collapse all files

13
package-lock.json generated
View File

@ -30,6 +30,7 @@
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"less": "^4.2.0", "less": "^4.2.0",
"less-loader": "^8.0.0", "less-loader": "^8.0.0",
"lib-flexible": "^0.3.2",
"postcss": "^8.4.31", "postcss": "^8.4.31",
"postcss-preset-env": "^9.3.0", "postcss-preset-env": "^9.3.0",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
@ -8021,6 +8022,12 @@
"node": ">=6" "node": ">=6"
} }
}, },
"node_modules/lib-flexible": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
"integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==",
"dev": true
},
"node_modules/lilconfig": { "node_modules/lilconfig": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
@ -19178,6 +19185,12 @@
"integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==", "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
"dev": true "dev": true
}, },
"lib-flexible": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
"integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==",
"dev": true
},
"lilconfig": { "lilconfig": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",

1
package.json
View File

@ -29,6 +29,7 @@
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"less": "^4.2.0", "less": "^4.2.0",
"less-loader": "^8.0.0", "less-loader": "^8.0.0",
"lib-flexible": "^0.3.2",
"postcss": "^8.4.31", "postcss": "^8.4.31",
"postcss-preset-env": "^9.3.0", "postcss-preset-env": "^9.3.0",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"

BIN
src/assets/nyjc/今日.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 117 B

BIN
src/assets/nyjc/昨日.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 116 B

2
src/main.js
View File

@ -3,6 +3,8 @@ import App from "./App.vue";
import "./registerServiceWorker"; import "./registerServiceWorker";
import router from "./router"; import router from "./router";
import store from "./store"; import store from "./store";
// 动态设置根元素html字体大小
// import "lib-flexible";
Vue.config.productionTip = false; Vue.config.productionTip = false;
import ElementUI from "element-ui"; import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css"; import "element-ui/lib/theme-chalk/index.css";

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

@ -407,13 +407,10 @@ export default {
}, },
//余热发电 3d //余热发电 3d
yrfd() { yrfd() {
let xaxisData = ["1月", "2月", "3月", "4月", "5月"]; const offsetX = 24; //bar宽
let yaxisData = [90, 80, 100, 70, 65]; const offsetY = 8; //倾斜角度
const offsetX = 20;
const offsetY = 10;
// 绘制左侧面 // 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({ const CubeLeft = this.$echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
@ -435,7 +432,7 @@ export default {
}, },
}); });
// 绘制右侧面 // 绘制右侧面
const CubeRight = echarts.graphic.extendShape({ const CubeRight = this.$echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
@ -455,15 +452,16 @@ export default {
}, },
}); });
// 绘制顶面 // 绘制顶面
const CubeTop = echarts.graphic.extendShape({ const CubeTop = this.$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])
@ -474,78 +472,75 @@ export default {
}, },
}); });
// 注册三个面图形 // 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft); this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight); this.$echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop); this.$echarts.graphic.registerShape("CubeTop", CubeTop);
let xAxisData = ["1月", "2月", "3月", "4月", "5月"];
let seriesData = [100, 200, 300, 400, 300];
//拿到最大值
const maxValue = Math.max(...seriesData);
const option = { let colorArr = [
legend: { ["#04E886"],
data: [ ["#0AE841", "rgba(56,231,197,1)"],
{ ["#02C25F", "rgba(11,194,121,1)"],
name: "余热发电量", ];
textStyle: { let option = {
color: "white", // legend: {
fontSize: 20, // // data: [
}, // // {
itemStyle: { // // icon: "rect",
color: "#0DFC4A", // 图例图标的颜色 // // name: "余热发电",
}, // // },
}, // // ],
], // textStyle: {
}, // color: "#fff",
// tooltip: { // fontSize: "20px",
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// }, // },
// // formatter: function (params) {
// // const item = params[1]
// // return item.name + ' : ' + item.value
// // }
// }, // },
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params, ticket, callback) {
const item = params[1];
return item.name + " : " + item.value;
},
},
grid: { grid: {
left: "3%", // 让图表占满容器
right: "4%", left: "5%",
bottom: "3%", right: "5%",
bottom: "0%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xaxisData, data: xAxisData,
axisLabel: { axisLine: {
show: true, show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
}, },
axisTick: { axisTick: {
show: true, show: false,
},
axisLabel: {
fontSize: 20,
color: "#fff",
margin: 15,
}, },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
splitArea: false, name: "单位:t",
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,
@ -556,30 +551,13 @@ export default {
color: "#fff", color: "#fff",
fontSize: 20, fontSize: 20,
}, },
interval: 0, //代表显示所有x轴标签显示
}, },
// boundaryGap: ['20%', '20%'],
}, },
series: [ series: [
{ {
name: "余热发电量",
type: "custom", type: "custom",
markPoint: { name: "余热发电",
data: [
{
type: "max",
name: "Max",
symbolOffset: [-20, 0],
itemStyle: {
color: "transparent", // 标注点颜色
},
// label 用于设置标注点上的文本标签样式
label: {
color: "#0BE73B", // 文本颜色
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 {
@ -599,11 +577,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: "#09E63A", color: colorArr[1][0],
}, },
{ {
offset: 1, offset: 1,
color: "#39E7C7", color: colorArr[1][1],
}, },
]), ]),
}, },
@ -622,11 +600,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: "#00C35A", color: colorArr[2][0],
}, },
{ {
offset: 1, offset: 1,
color: "#09C379", color: colorArr[2][1],
}, },
]), ]),
}, },
@ -645,11 +623,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: "#05E6A5", color: colorArr[0][0],
}, },
{ {
offset: 1, offset: 1,
color: "#12DE63", color: colorArr[0][0],
}, },
]), ]),
}, },
@ -657,7 +635,27 @@ export default {
], ],
}; };
}, },
data: yaxisData, data: seriesData,
},
{
type: "bar",
label: {
normal: {
show: true,
position: "top",
formatter: (e) => {
return e.value === maxValue ? e.value : "";
},
fontSize: 20,
color: "#09E83E",
offset: [0, -15],
},
},
itemStyle: {
color: "transparent",
},
tooltip: {},
data: seriesData,
}, },
], ],
}; };

326
src/views/lll/NYJCD/PDS.vue
View File

@ -404,9 +404,11 @@ export default {
let xaxisData = ["1月", "2月", "3月", "4月", "5月"]; let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
let yaxisData = [90, 80, 100, 70, 65]; let yaxisData = [90, 80, 100, 70, 65];
let yaxisData2 = [60, 56, 34, 69, 79]; let yaxisData2 = [60, 56, 34, 69, 79];
//拿到最大值
const offsetX = 20; const maxValue = Math.max(...yaxisData);
const offsetY = 10; const maxValue2 = Math.max(...yaxisData2);
const offsetX = 15;
const offsetY = 5;
// 绘制左侧面 // 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({ const CubeLeft = echarts.graphic.extendShape({
shape: { shape: {
@ -416,7 +418,6 @@ export default {
buildPath: function (ctx, shape) { buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的 // 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint; const xAxisPoint = shape.xAxisPoint;
// console.log(shape);
const c0 = [shape.x, shape.y]; const c0 = [shape.x, shape.y];
const c1 = [shape.x - offsetX, shape.y - offsetY]; const c1 = [shape.x - offsetX, shape.y - offsetY];
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]; const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
@ -429,6 +430,7 @@ export default {
.closePath(); .closePath();
}, },
}); });
// 绘制右侧面 // 绘制右侧面
const CubeRight = echarts.graphic.extendShape({ const CubeRight = echarts.graphic.extendShape({
shape: { shape: {
@ -449,6 +451,7 @@ export default {
.closePath(); .closePath();
}, },
}); });
// 绘制顶面 // 绘制顶面
const CubeTop = echarts.graphic.extendShape({ const CubeTop = echarts.graphic.extendShape({
shape: { shape: {
@ -457,7 +460,7 @@ export default {
}, },
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 c4 = [shape.x - offsetX, shape.y - offsetY]; const c4 = [shape.x - offsetX, shape.y - offsetY];
ctx ctx
@ -468,122 +471,67 @@ export default {
.closePath(); .closePath();
}, },
}); });
// 注册三个面图形 // 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft); echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop); echarts.graphic.registerShape("CubeTop", CubeTop);
const option = { let option = {
legend: { legend: {
data: [ data: [
{ { icon: "rect", name: "昨日" },
name: "昨日", { icon: "rect", name: "今日" },
// icon: require("../../../assets/nyjc/昨日.png"),
textStyle: {
color: "white",
},
},
{
name: "今日",
// icon: require("../../../assets/nyjc/今日.png"),
textStyle: {
color: "white",
},
},
], ],
textStyle: {
color: "#fff",
fontSize: "20px",
},
}, },
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// },
// // formatter: function (params) {
// // const item = params[1]
// // return item.name + ' : ' + item.value
// // }
// },
grid: { grid: {
left: "3%", left: "1%",
right: "4%", right: "0%",
bottom: "3%", top: "16%",
bottom: "5%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xaxisData, data: xaxisData,
axisLabel: { axisLine: {
show: true, show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
}, },
axisTick: { axisTick: {
show: true, show: true,
}, },
axisLabel: {
fontSize: 20,
color: "#FFFFFF",
},
}, },
yAxis: { yAxis: {
type: "value", type: "value",
splitArea: false,
name: "单位:kWh", name: "单位:kWh",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 20, fontSize: 20,
padding: 10,
},
axisLine: {
show: false,
lineStyle: {
width: 2,
color: "#CEDDF2",
},
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: {
color: "#2A353F",
type: "dashed",
},
},
axisTick: {
show: false,
}, },
axisLabel: { axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 20, fontSize: 20,
}, color: "#FFFFFF",
interval: 0, //代表显示所有x轴标签显示
}, },
}, },
series: [ series: [
{ {
type: "custom", type: "custom",
name: "今日", name: "昨日",
markPoint: {
data: [
{
type: "max",
name: "Max",
symbolOffset: [25, 0],
itemStyle: {
color: "transparent", // 标注点颜色
},
// label 用于设置标注点上的文本标签样式
label: {
color: "#24BDF2", // 文本颜色
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 {
type: "group", type: "group",
x: 30,
children: [ children: [
{ {
type: "CubeLeft", type: "CubeLeft",
@ -599,11 +547,15 @@ 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: "#4567FF", color: "#08E83C",
},
{
offset: 0.35,
color: "#1FE77D",
}, },
{ {
offset: 1, offset: 1,
color: "#0CC7FA", color: "#38E7C5",
}, },
]), ]),
}, },
@ -622,11 +574,15 @@ 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: "#115DD5", color: "#00C25D",
},
{
offset: 0.35,
color: "#05C269",
}, },
{ {
offset: 1, offset: 1,
color: "#0574D0", color: "#0BC27B",
}, },
]), ]),
}, },
@ -641,126 +597,139 @@ export default {
y: location[1], y: location[1],
xAxisPoint: api.coord([api.value(0), 0]), xAxisPoint: api.coord([api.value(0), 0]),
}, },
style: {
fill: "#05E861",
},
},
],
};
},
data: yaxisData,
},
{
type: "bar",
itemStyle: {
color: "transparent",
},
data: yaxisData,
label: {
normal: {
show: true,
position: "top",
formatter: (e) => {
return e.value === maxValue ? e.value : "";
},
fontSize: 20,
color: "#02C262",
offset: [0, -15],
},
},
},
{
type: "custom",
name: "今日",
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",
children: [
{
type: "CubeLeft",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0] - distance,
y: location[1],
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
},
style: { style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ {
offset: 0, offset: 0,
color: "#0D7FFB", color: "#10C6FF",
},
{
offset: 0.35,
color: "#377DFF",
}, },
{ {
offset: 1, offset: 1,
color: "#0440EB", color: "#4464FF",
}, },
]), ]),
}, },
}, },
{
type: "CubeRight",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0] - distance,
y: location[1],
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#0673D5",
},
{
offset: 0.35,
color: "#0B68D5",
},
{
offset: 1,
color: "#115DD5",
},
]),
},
},
{
type: "CubeTop",
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0] - distance,
y: location[1],
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
},
style: {
fill: "#0964FF",
},
},
], ],
}; };
}, },
data: yaxisData2, data: yaxisData2,
}, },
{ {
type: "custom", type: "bar",
name: "昨日",
markPoint: {
data: [
{
type: "max",
name: "Max",
symbolOffset: [-20, 0],
itemStyle: { itemStyle: {
color: "transparent", // 标注点颜色 color: "transparent",
}, },
// label 用于设置标注点上的文本标签样式 data: yaxisData2,
label: { label: {
color: "#0BE73B", // 文本颜色 normal: {
fontSize: 25, show: true,
position: "top",
formatter: (e) => {
return e.value === maxValue2 ? e.value : "";
}, },
fontSize: 20,
color: "#3286FF",
offset: [0, -15],
}, },
],
},
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,
},
],
};
this.defineEcharts("pdsydl", option); this.defineEcharts("pdsydl", option);
}, },
// addMessageListener() { // addMessageListener() {
@ -791,8 +760,7 @@ 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), background-image: url(../../../assets/img/左遮罩.png), url(../../../assets/img/右遮罩.png);
url(../../../assets/img/右遮罩.png);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;

211
src/views/lll/NYJCD/SCX1.vue
View File

@ -10,9 +10,7 @@
<p>{{ $route.query.type }}实时电荷</p> <p>{{ $route.query.type }}实时电荷</p>
</div> </div>
<div class="data"> <div class="data">
<span <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
:class="res == '年' ? 'active' : ''"
@click="(res = '年'), change()"
>年</span >年</span
> >
<span :class="res == '月' ? 'active' : ''" @click="res = '月'" <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
@ -176,6 +174,7 @@
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import highcharts from "highcharts";
export default { export default {
data() { data() {
return { return {
@ -470,10 +469,6 @@ export default {
}, },
}, },
methods: { methods: {
change() {
this.option1.xAxis.data = ["1月", "2月", "3月", "4月"];
this.defineEcharts("pdsssdh", this.option1);
},
defineEcharts(dom, option) { defineEcharts(dom, option) {
var chartDom = document.getElementById(dom); var chartDom = document.getElementById(dom);
var myChart = this.$echarts.init(chartDom); var myChart = this.$echarts.init(chartDom);
@ -564,14 +559,12 @@ export default {
data: [ data: [
{ {
name: "昨日", name: "昨日",
// icon: require("../../../assets/nyjc/昨日.png"),
textStyle: { textStyle: {
color: "white", color: "white",
}, },
}, },
{ {
name: "今日", name: "今日",
// icon: require("../../../assets/nyjc/今日.png"),
textStyle: { textStyle: {
color: "white", color: "white",
}, },
@ -645,106 +638,6 @@ export default {
}, },
}, },
series: [ series: [
{
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)]);
return {
type: "group",
x: 30,
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: "#4567FF",
},
{
offset: 1,
color: "#0CC7FA",
},
]),
},
},
{
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: "#115DD5",
},
{
offset: 1,
color: "#0574D0",
},
]),
},
},
{
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: "#0D7FFB",
},
{
offset: 1,
color: "#0440EB",
},
]),
},
},
],
};
},
data: yaxisData2,
},
{ {
type: "custom", type: "custom",
name: "昨日", name: "昨日",
@ -845,6 +738,106 @@ export default {
}, },
data: yaxisData, data: yaxisData,
}, },
{
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)]);
return {
type: "group",
x: 30,
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: "#4567FF",
},
{
offset: 1,
color: "#0CC7FA",
},
]),
},
},
{
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: "#115DD5",
},
{
offset: 1,
color: "#0574D0",
},
]),
},
},
{
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: "#0D7FFB",
},
{
offset: 1,
color: "#0440EB",
},
]),
},
},
],
};
},
data: yaxisData2,
},
], ],
}; };
this.defineEcharts("pdsydl", option); this.defineEcharts("pdsydl", option);

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

@ -495,13 +495,10 @@ export default {
}, },
//月用煤量 3d //月用煤量 3d
yysl() { yysl() {
let xaxisData = ["1月", "2月", "3月", "4月", "5月"]; const offsetX = 24; //bar宽
let yaxisData = [90, 80, 100, 70, 65]; const offsetY = 8; //倾斜角度
const offsetX = 20;
const offsetY = 10;
// 绘制左侧面 // 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({ const CubeLeft = this.$echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
@ -523,7 +520,7 @@ export default {
}, },
}); });
// 绘制右侧面 // 绘制右侧面
const CubeRight = echarts.graphic.extendShape({ const CubeRight = this.$echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
@ -543,15 +540,16 @@ export default {
}, },
}); });
// 绘制顶面 // 绘制顶面
const CubeTop = echarts.graphic.extendShape({ const CubeTop = this.$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])
@ -562,78 +560,75 @@ export default {
}, },
}); });
// 注册三个面图形 // 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft); this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight); this.$echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop); this.$echarts.graphic.registerShape("CubeTop", CubeTop);
let xAxisData = ["1月", "2月", "3月", "4月", "5月"];
let seriesData = [100, 200, 300, 400, 300];
//拿到最大值
const maxValue = Math.max(...seriesData);
const option = { let colorArr = [
legend: { ["#0A67FF"],
data: [ ["#10C6FF", "rgba(60,113,255,1)"],
{ ["#0774D6", "rgba(17,94,213,1)"],
name: "月用煤量", ];
textStyle: { let option = {
color: "white", // legend: {
fontSize: 20, // data: [
}, // {
itemStyle: { // icon: "rect",
color: "#0E62D5", // 图例图标的颜色 // name: "炭排放量",
},
},
],
},
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// }, // },
// // formatter: function (params) { // ],
// // const item = params[1] // textStyle: {
// // return item.name + ' : ' + item.value // color: "#fff",
// // } // fontSize: "20px",
// }, // },
// },
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params, ticket, callback) {
const item = params[1];
return item.name + " : " + item.value;
},
},
grid: { grid: {
left: "3%", // 让图表占满容器
right: "4%", left: "5%",
bottom: "3%", right: "5%",
bottom: "0%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xaxisData, data: xAxisData,
axisLabel: { axisLine: {
show: true, show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
}, },
axisTick: { axisTick: {
show: true, show: false,
},
axisLabel: {
fontSize: 20,
color: "#fff",
margin: 15,
}, },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
splitArea: false, name: "单位:t",
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,
@ -644,30 +639,13 @@ export default {
color: "#fff", color: "#fff",
fontSize: 20, fontSize: 20,
}, },
interval: 0, //代表显示所有x轴标签显示
}, },
// boundaryGap: ['20%', '20%'],
}, },
series: [ series: [
{ {
name: "月用煤量",
type: "custom", type: "custom",
markPoint: { name: "炭排放量",
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 {
@ -687,11 +665,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: "#4567FF", color: colorArr[1][0],
}, },
{ {
offset: 1, offset: 1,
color: "#0CC7FA", color: colorArr[1][1],
}, },
]), ]),
}, },
@ -710,11 +688,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: "#115DD5", color: colorArr[2][0],
}, },
{ {
offset: 1, offset: 1,
color: "#0574D0", color: colorArr[2][1],
}, },
]), ]),
}, },
@ -733,11 +711,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: "#0D7FFB", color: colorArr[0][0],
}, },
{ {
offset: 1, offset: 1,
color: "#0440EB", color: colorArr[0][0],
}, },
]), ]),
}, },
@ -745,7 +723,27 @@ export default {
], ],
}; };
}, },
data: yaxisData, data: seriesData,
},
{
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,
}, },
], ],
}; };
@ -767,8 +765,7 @@ 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), background-image: url(../../assets/img/左遮罩.png), 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;

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

@ -425,13 +425,10 @@ export default {
}, },
//月用水量 //月用水量
yysl() { yysl() {
let xaxisData = ["1月", "2月", "3月", "4月", "5月"]; const offsetX = 24; //bar宽
let yaxisData = [90, 80, 100, 70, 65]; const offsetY = 8; //倾斜角度
const offsetX = 20;
const offsetY = 10;
// 绘制左侧面 // 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({ const CubeLeft = this.$echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
@ -453,7 +450,7 @@ export default {
}, },
}); });
// 绘制右侧面 // 绘制右侧面
const CubeRight = echarts.graphic.extendShape({ const CubeRight = this.$echarts.graphic.extendShape({
shape: { shape: {
x: 0, x: 0,
y: 0, y: 0,
@ -473,15 +470,16 @@ export default {
}, },
}); });
// 绘制顶面 // 绘制顶面
const CubeTop = echarts.graphic.extendShape({ const CubeTop = this.$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])
@ -492,78 +490,75 @@ export default {
}, },
}); });
// 注册三个面图形 // 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft); this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight); this.$echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop); this.$echarts.graphic.registerShape("CubeTop", CubeTop);
let xAxisData = ["1月", "2月", "3月", "4月", "5月"];
let seriesData = [100, 200, 300, 400, 300];
//拿到最大值
const maxValue = Math.max(...seriesData);
const option = { let colorArr = [
legend: { ["#0A67FF"],
data: [ ["#10C6FF", "rgba(60,113,255,1)"],
{ ["#0774D6", "rgba(17,94,213,1)"],
name: "月用水量", ];
textStyle: { let option = {
color: "white", // legend: {
fontSize: 20, // data: [
}, // {
itemStyle: { // icon: "rect",
color: "#0E62D5", // 图例图标的颜色 // name: "炭排放量",
},
},
],
},
// tooltip: {
// trigger: "axis",
// axisPointer: {
// type: "shadow",
// }, // },
// // formatter: function (params) { // ],
// // const item = params[1] // textStyle: {
// // return item.name + ' : ' + item.value // color: "#fff",
// // } // fontSize: "20px",
// }, // },
// },
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
formatter: function (params, ticket, callback) {
const item = params[1];
return item.name + " : " + item.value;
},
},
grid: { grid: {
left: "3%", // 让图表占满容器
right: "4%", left: "5%",
bottom: "3%", right: "5%",
bottom: "0%",
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xaxisData, data: xAxisData,
axisLabel: { axisLine: {
show: true, show: true,
textStyle: {
color: "#fff",
fontSize: 20,
},
interval: 0, //代表显示所有x轴标签显示
}, },
axisTick: { axisTick: {
show: true, show: false,
},
axisLabel: {
fontSize: 20,
color: "#fff",
margin: 15,
}, },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
splitArea: false, name: "单位:t",
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,
@ -574,30 +569,13 @@ export default {
color: "#fff", color: "#fff",
fontSize: 20, fontSize: 20,
}, },
interval: 0, //代表显示所有x轴标签显示
}, },
// boundaryGap: ['20%', '20%'],
}, },
series: [ series: [
{ {
name: "月用水量",
type: "custom", type: "custom",
markPoint: { name: "炭排放量",
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 {
@ -617,11 +595,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: "#4567FF", color: colorArr[1][0],
}, },
{ {
offset: 1, offset: 1,
color: "#0CC7FA", color: colorArr[1][1],
}, },
]), ]),
}, },
@ -640,11 +618,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: "#115DD5", color: colorArr[2][0],
}, },
{ {
offset: 1, offset: 1,
color: "#0574D0", color: colorArr[2][1],
}, },
]), ]),
}, },
@ -663,11 +641,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: "#0D7FFB", color: colorArr[0][0],
}, },
{ {
offset: 1, offset: 1,
color: "#0440EB", color: colorArr[0][0],
}, },
]), ]),
}, },
@ -675,7 +653,27 @@ export default {
], ],
}; };
}, },
data: yaxisData, data: seriesData,
},
{
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,
}, },
], ],
}; };
@ -697,8 +695,7 @@ 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), background-image: url(../../assets/img/左遮罩.png), 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;