大屏

liuying

2024-11-11 62ec1f19c3444695e21f1fe97472261ce3082075

 yiqi_screen/src/components/ProductionCompletionTrend.vue

@@ -1,35 +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=[];
      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,
          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.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 +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,#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",
            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: true,
        //   smooth: true, // 使折线图平滑
        //   yAxisIndex: 0, // 与相应的 y 轴关联
        //   color: "rgba(255,255,255,0.85)", // 自定义颜色
        //   lineStyle: {
        //     width: 1,
        //   },
        // },
      ],
      // animation: true,
      // dataZoom: [
@@ -167,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: {
    // 水平滚动
@@ -223,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>

<style></style>