From 62ec1f19c3444695e21f1fe97472261ce3082075 Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周一, 11 11月 2024 13:39:59 +0800
Subject: [PATCH] 大屏
---
yiqi_screen/src/components/ProductionCompletionTrend.vue | 282 +++++++++++++++++++++++++++++++++++---------------------
1 files changed, 175 insertions(+), 107 deletions(-)
diff --git a/yiqi_screen/src/components/ProductionCompletionTrend.vue b/yiqi_screen/src/components/ProductionCompletionTrend.vue
index 8987f4f..0410158 100644
--- a/yiqi_screen/src/components/ProductionCompletionTrend.vue
+++ b/yiqi_screen/src/components/ProductionCompletionTrend.vue
@@ -1,40 +1,55 @@
<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=[],yData3=[];
- val.forEach(item => {
- xData.push(item.month)
- yData1.push(item.completionNum) //瀹為檯
- yData2.push(item.planCompletionRate) //planCompletionRate
- yData3.push(item.planCompletionNum) //璁″垝
+ 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,
+ symbolRepeat: false,
+ }); //瀹為檯
+ // yData1.push(item.completionNum); //瀹為檯
+ 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.$set(this.option.series[2],'data',yData3)
+ 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"));
@@ -42,137 +57,143 @@
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,#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 />', // 娣诲姞鐢熶骇璁″垝鏁版彁绀�
+ "{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",
- 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",
+ 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",
- 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% 澶勭殑棰滆壊
- },
- ],
- },
+ 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% 澶勭殑棰滆壊
+ // },
+ // ],
+ // },
},
{
name: "鐢熶骇瀹屾垚鐜�",
type: "line",
data: [],
- showSymbol:false,
+ showSymbol: true,
yAxisIndex: 1,
- color: 'rgba(255,255,255,0.85)',
- lineStyle:{
- width:3
- }
+ smooth: true, // 浣挎姌绾垮浘骞虫粦
+ color: "rgba(255,205,86,0.85)",
+ lineStyle: {
+ width: 1,
+ },
},
- {
- name: "鐢熶骇璁″垝鏁�", // 娣诲姞鐢熶骇璁″垝鏁�
- type: "line",
- data: [], // 鏍规嵁闇�瑕佸～鍏呮鏁扮粍
- showSymbol: false,
- yAxisIndex: 0, // 涓庣浉搴旂殑 y 杞村叧鑱�
- color: 'rgba(255,205,86,0.85)', // 鑷畾涔夐鑹�
- lineStyle: {
- width: 3
- }
- }
+ // {
+ // name: "鐢熶骇璁″垝鏁�", // 娣诲姞鐢熶骇璁″垝鏁�
+ // type: "line",
+ // data: [], // 鏍规嵁闇�瑕佸～鍏呮鏁扮粍
+ // showSymbol: true,
+ // smooth: true, // 浣挎姌绾垮浘骞虫粦
+ // yAxisIndex: 0, // 涓庣浉搴旂殑 y 杞村叧鑱�
+ // color: "rgba(255,255,255,0.85)", // 鑷畾涔夐鑹�
+ // lineStyle: {
+ // width: 1,
+ // },
+ // },
],
// animation: true,
// dataZoom: [
@@ -186,15 +207,17 @@
// ],
};
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: {
// 姘村钩婊氬姩
@@ -242,9 +265,54 @@
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