From 0630126012170da25291d55f0a1bd3130e64f434 Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周一, 28 4月 2025 15:45:28 +0800
Subject: [PATCH] 一汽大屏 未提交的代码
---
yiqi_screen/src/components/ProductionCompletionTrend.vue | 282 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 192 insertions(+), 90 deletions(-)
diff --git a/yiqi_screen/src/components/ProductionCompletionTrend.vue b/yiqi_screen/src/components/ProductionCompletionTrend.vue
index 2d23cb8..54bd1e1 100644
--- a/yiqi_screen/src/components/ProductionCompletionTrend.vue
+++ b/yiqi_screen/src/components/ProductionCompletionTrend.vue
@@ -1,35 +1,73 @@
<template>
- <div class="box-container" id="echarts5"></div>
+ <div>
+ <div
+ class="box-container"
+ id="echarts5"
+ style="width: 100%; height: 230px"
+ ></div>
+ </div>
</template>
-
- <script>
+
+<script>
+import * as echarts from "echarts";
+import { zhu } from "./img/t.js";
+
export default {
- props:{
- produceCompletionData:{
- type:Array,
- default:()=>[]
- }
+ props: {
+ produceCompletionData: {
+ type: Array,
+ default: () => [],
+ },
},
data() {
return {
option: {},
myChart: {},
timechartes: null,
+ myChart2: null,
+ textureImg: null,
+ // img,
};
},
- watch:{
- produceCompletionData(val){
- let xData=[],yData1=[],yData2=[];
- val.forEach(item => {
- xData.push(item.month)
- yData1.push(item.planCompletionNum)
- yData2.push(item.planCompletionRate)
+ watch: {
+ produceCompletionData(val) {
+ let xData = [],
+ yData1 = [],
+ yData2 = [],
+ yData3 = [];
+ val.forEach((item) => {
+ console.log("ceshi", item.completionNum);
+ xData.push(item.month);
+ yData1.push({
+ // value: item.completionNum,
+ value: 100,
+ symbolRepeat: false,
+ }); //瀹為檯
+ // yData1.push(item.completionNum); //瀹為檯
+ var num = 0; //宸插畬鎴愭暟 / 璁″垝瀹屾垚鏁�
+ if (item.completionNum > 0) {
+ if (item.planCompletionNum > item.completionNum) {
+ // 5/10
+ num = item.completionNum / item.planCompletionNum;
+ } else if (item.planCompletionNum <= 0) {
+ // 10/0
+ num = 100;
+ } else if (item.completionNum >= item.planCompletionNum) {
+ // 10/5
+ num = 100;
+ }
+ }
+ yData2.push(num.toFixed(2)); //planCompletionRate
+ // yData2.push(item.planCompletionRate); //planCompletionRate
+ // yData3.push(item.planCompletionNum); //璁″垝
});
- this.$set(this.option.xAxis,'data',xData)
- this.$set(this.option.series[0],'data',yData1)
- this.$set(this.option.series[1],'data',yData2)
- this.myChart.setOption(this.option);
- }
+ this.$set(this.option.xAxis, "data", xData);
+ this.$set(this.option.series[0], "data", yData1);
+ this.$set(this.option.series[1], "data", yData2);
+ this.$nextTick(() => {
+ this.myChart.setOption(this.option);
+ });
+ },
},
mounted() {
this.myChart = this.$echarts.init(document.getElementById("echarts5"));
@@ -37,123 +75,142 @@
tooltip: {
trigger: "axis",
formatter:
- '{b0}鏈�<br /><a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#13e5f2,#01afba);border-radius:50%"></a> {a0}: {c0}<br /><a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%',
+ "{b0}鏈�<br />" +
+ // '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#13e5f2,#01afba);border-radius:50%"></a> {a0}: {c0}<br />' +
+ // '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#ffc107,#fd7e14);border-radius:50%"></a> {a2}: {c2}<br />' +
+ '<a style="display:inline-block;width:10px;height:10px;background:linear-gradient(to bottom,#fff,#eee);border-radius:50%"></a> {a1}: {c1}%<br />', // 娣诲姞鐢熶骇璁″垝鏁版彁绀�
backgroundColor: "rgba(0,0,0,0.7)",
textStyle: {
- color: "#fff",
+ color: "#ffffff",
},
},
grid: {
top: "15%",
- bottom: "15%",
- left: "16%",
- right: "15%"
+ bottom: "8%",
+ left: "18%",
+ right: "18%",
},
xAxis: {
- data: [ ],
+ data: [],
type: "category",
axisLabel: {
- color: "#fff",
- interval:0,
+ color: "#326e92",
+ interval: 0,
+ fontSize: 13,
// formatter: '{value}鏈�'
},
- axisTick:{
- show:false
+ axisTick: {
+ show: false,
},
- axisLine:{
- lineStyle:{
- color:'rgba(255,255,255,0.5)'
- }
- }
+ axisLine: {
+ lineStyle: {
+ color: "#326e92",
+ },
+ },
},
yAxis: [
{
type: "value",
- // name: "鎶ヨ娆℃暟",
- position:'left',
+ position: "left",
axisLine: {
- show: true,
+ show: false,
lineStyle: {
- color: 'rgba(255,255,255,0.5)',
+ color: "#326e92",
},
},
axisLabel: {
- show:true,
+ show: true,
margin: 5,
- color: "#fff",
- // formatter: '{value}%'
+ color: "#326e92",
+ formatter: "{value}%",
},
- alignTicks: true,
+ alignTicks: false,
nameTextStyle: {
color: "#fff",
},
- splitLine:{
- lineStyle:{
- color:'rgba(255,255,255,0.5)'
- }
- }
+ splitLine: {
+ lineStyle: {
+ color: "#326e92",
+ },
+ },
},
{
- show:true,
+ show: true,
type: "value",
- position:'right',
+ position: "right",
// name: "鎸佺画鏃堕暱",
axisLine: {
show: false,
lineStyle: {
- color: "rgba(255,255,255,0.5)",
+ color: "#326e92",
},
},
axisLabel: {
- show:true,
- color: "#fff",
- formatter: '{value}%'
+ show: true,
+ color: "#326e92",
+ formatter: "{value}%",
},
nameTextStyle: {
- color: "#fff",
+ color: "#326e92",
},
- splitLine:{
- lineStyle:{
- color:'rgba(255,255,255,0)'
- }
- }
+ splitLine: {
+ lineStyle: {
+ color: "#326e92",
+ },
+ },
},
],
series: [
{
name: "鐢熶骇瀹屾垚鏁�",
- type: "bar",
+ type: "pictorialBar",
+ // type: "bar",
+ symbol: "image://" + zhu,
data: [],
- yAxisIndex: 0,
- color: {
- type: "linear",
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [
- {
- offset: 0,
- color: "#13e5f2", // 0% 澶勭殑棰滆壊
- },
- {
- offset: 1,
- color: "#01afba", // 100% 澶勭殑棰滆壊
- },
- ],
- },
+ // yAxisIndex: 0,
+ // color: {
+ // type: "linear",
+ // x: 0,
+ // y: 0,
+ // x2: 0,
+ // y2: 1,
+ // colorStops: [
+ // {
+ // offset: 0,
+ // color: "#13e5f2", // 0% 澶勭殑棰滆壊
+ // },
+ // {
+ // offset: 1,
+ // color: "#01afba", // 100% 澶勭殑棰滆壊
+ // },
+ // ],
+ // },
},
{
name: "鐢熶骇瀹屾垚鐜�",
type: "line",
data: [],
- showSymbol:false,
+ z: 5,
+ showSymbol: true,
yAxisIndex: 1,
- color: 'rgba(255,255,255,0.85)',
- lineStyle:{
- width:3
- }
+ smooth: true, // 浣挎姌绾垮浘骞虫粦
+ color: "#ff9600",
+ lineStyle: {
+ width: 1,
+ },
},
+ // {
+ // name: "鐢熶骇璁″垝鏁�", // 娣诲姞鐢熶骇璁″垝鏁�
+ // type: "line",
+ // data: [], // 鏍规嵁闇�瑕佸～鍏呮鏁扮粍
+ // showSymbol: true,
+ // smooth: true, // 浣挎姌绾垮浘骞虫粦
+ // yAxisIndex: 0, // 涓庣浉搴旂殑 y 杞村叧鑱�
+ // color: "rgba(255,255,255,0.85)", // 鑷畾涔夐鑹�
+ // lineStyle: {
+ // width: 1,
+ // },
+ // },
],
// animation: true,
// dataZoom: [
@@ -167,15 +224,16 @@
// ],
};
this.myChart.setOption(this.option);
- const that=this
- window.addEventListener('resize',()=>{
+ const that = this;
+ window.addEventListener("resize", () => {
that.myChart.resize();
- })
+ });
// this.barChartScrolling();
// this.defineEvent()
// window.addEventListener("resize", ()=> {
// this.myChart.resize();
// });
+ // this.init()
},
methods: {
// 姘村钩婊氬姩
@@ -223,9 +281,53 @@
clearInterval(this.timechartes);
});
},
+
+ init() {
+ var chartDom = document.getElementById("main");
+ var myChart = echarts.init(chartDom);
+ var option;
+ var rocket = "";
+
+ option = {
+ legend: {
+ data: ["tu1", "barbg1"],
+ },
+ xAxis: {
+ data: ["a", "b", "c", "d"],
+ },
+ yAxis: {
+ show: true,
+ },
+ series: [
+ {
+ type: "pictorialBar",
+ name: "tu1",
+ symbol: "image://" + zhu,
+ data: [
+ {
+ value: 60,
+ symbolRepeat: false,
+ },
+ {
+ value: 60,
+ symbolRepeat: false,
+ },
+ {
+ value: 60,
+ symbolRepeat: false,
+ },
+ {
+ value: 60,
+ symbolRepeat: false,
+ },
+ ],
+ },
+ ],
+ };
+ myChart.setOption(option);
+ },
},
};
</script>
-
- <style>
-</style>
\ No newline at end of file
+
+<style></style>
--
Gitblit v1.9.3