yudao-dev/src/views/OperationalOverview/components/doubleYChart .vue

<!--
 * @Author: zhp
 * @Date: 2023-09-21 09:06:28
 * @LastEditTime: 2024-04-03 16:24:21
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div style="height: 400px;">
    <div :id="id" class="productChart" :style="{ height:   '420px', width: width }" />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
// import resize from './../mixins/resize'
export default {
  name: 'OverviewBar',
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'linearBarChart'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    borderRadius: {
      type: Array,
      default: () => [9, 9, 0, 0]
    },
    beilv: {
      type: Number,
      default: 1
    },
    height: {
      type: Number,
      default: 200
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    nameList: {
      type: Array,
      default: () => []
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null,
      series: [{
        type: 'bar',
        data: [],
        barWidth: 6
      }]
    }
  },
  // mounted() {
  //   console.log('mounted')
  //   console.log('borderRadius: ', this.borderRadius)
  //   // this.$nextTick(() => {
  //   //   this.initChart()
  //   // })
  // },
  mounted() {
    this.$el.addEventListener('resize', () => {
      console.log('resziing.....');
    });
    // this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(nameList, passRateList, outputNumList) {
      console.log(nameList, passRateList)
     let  series= [
        {
          name: '产线产量',
          type: 'bar',
          yAxisIndex: 1,
         itemStyle: {
           normal: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: '#9DD5FF' },
               { offset: 0.3, color: '#1295FF' }
             ]),
             label: {
               show: true,		//开启显示
               position: 'top',	//在上方显示
               textStyle: {	    //数值样式
                 color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
                 fontSize: 12,
                 fontWight:'bolder'
               }
             },
            }
            // barBorderRadius: this.borderRadius
          },
          barWidth: 18,
         data: outputNumList
        },
        {
          name: '产线良品率',
          symbol: 'circle', //变为实心圆
          type: 'line',
          yAxisIndex: 0,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255, 209, 96, 0.18)'
              },
              {
                offset: 1,
                color: 'rgba(255, 234, 153, 0)'
              }
            ])
          },
          itemStyle: {
            normal: {
              color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
              lineStyle: {
                color: 'rgba(255, 209, 96, 1)' //改变折线颜色
              }
            }
          },
          // data: passRateList
          data: passRateList
        }
      ]
      // const colors = ['#5470C6', '#91CC75', '#EE6666']
      this.chart = echarts.init(document.getElementById(this.id))
      if (!nameList && !passRateList && !outputNumList) {
        // 隐藏echarts图表
        this.chart.clear(); // 清空图表
        this.chart.setOption({ // 设置空的option
          title: {
            show: false
          },
          series: []
        });
      } else {
        // 显示echarts图表
        this.chart.setOption({
          // color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: { top: 70, right: 20, bottom: 10, left: 10, containLabel: true },
          // legend: {
          //   itemWidth: 10,
          //   itemHeight: 10,
          //   top: '2%',
          //   right: '30px',
          //   data: ['产线良品率', '产线产量'],
          //   textStyle: {
          //     fontSize: 12 * this.beilv,
          //     color: '#ced1d5',
          //     fontWight: 'bolder'
          //   }
          // },
          xAxis: {
            axisTick: {
              show: false
            },
            type: 'category',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#25528f',
                width: '1' // 坐标线的宽度
              }
            },
            textStyle: {
              fontWight: 'bolder'
            },
            axisLabel: {
              color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
              fontSize: 12,
              // formatter: '{value}'
              // textStyle: {
              //   color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
              // }
            },
            splitLine: {
              lineStyle: {
                color: '#25528f'
              }
            },
            data: nameList
          },
          // yAxis: {

          // },
          yAxis: [
            {
              // min: function() { // 取最小值向下取整为最小刻度
              //   return 0
              // },
              // max: function(value) { // 取最大值向上取整为最大刻度
              //   return Math.ceil(value.max)
              // },
              scale: true,
              type: 'value',
              name: '良品率/%',
              nameTextStyle: {// y轴上方单位的颜色
                color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
                align: "left",
                padding: [0, 0, 0, 8]
              },
              position: 'right',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  // type: 'solid',
                  color: '#25528f',
                  // width: '1' // 坐标线的宽度
                }
              },
              axisLabel: {
                color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
                fontSize: 12,
                // formatter: '{value}'
                formatter: '{value}%'
                // }
              },
              splitLine: {
                lineStyle: {
                  color: '#25528f'
                }
              }
              // type: 'value'
              // axisLine: {
              //   show: true,
              //   lineStyle: {
              //     color: colors[0]
              //   }
              // },
            },
            {
              // min: function() { // 取最小值向下取整为最小刻度
              //   return 0
              // },
              // max: function(value) { // 取最大值向上取整为最大刻度
              //   return Math.ceil(value.max)
              // },
              scale: true,
              type: 'value',
              name: '产量/片', // y轴上方的单位
              nameTextStyle: {
                color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
                // fontSize: 10,
                padding: [0, 4, 0, 0],
                align: "right",
              },
              // position: 'left',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  // type: 'solid',
                  color: '#25528f', // 左边线的颜色
                  // width: '1' // 坐标线的宽度
                }
              },
              axisLabel: {
                // textStyle: {
                // color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
                color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
                // show: true,
                lineStyle: {
                  color: "#25528f",
                },
                // }
              },
              splitLine: {
                lineStyle: {
                  color: '#25528f'
                }
              }
              // type: 'value'
              // axisLine: {
              //   show: true,
              //   lineStyle: {
              //     color: colors[1]
              //   }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
              // },
            }
          ],
          series: series
        })
      }

    }
  }
}
</script>
<style>
.productChart{
  position: absolute;
  height: 100%;
  width: 100%;
  top: -30px;
}
</style>