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

<!--
 * @Author: zhp
 * @Date: 2023-09-21 09:06:28
 * @LastEditTime: 2023-12-27 18:28:45
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div>
    <div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
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,
      nameList: [],
      series: [{
        type: 'bar',
        data: [],
        barWidth: 6
      }]
    }
  },
  mounted() {
    console.log('mounted')
    console.log('borderRadius: ', this.borderRadius)
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(nameList, passRateList, outputNumList) {
     let  series= [
        {
          name: '产线产量',
          type: 'bar',
          yAxisIndex: 1,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#9DD5FF' },
              { offset: 1, color: '#1295FF' }
            ])
            // barBorderRadius: this.borderRadius
          },
          barWidth: 12,
         data: outputNumList
        },
        {
          name: '产线良品率',
          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
        }
      ]
      const colors = ['#5470C6', '#91CC75', '#EE6666']
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        color: colors,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          width: 'auto',
          height: "auto",
          containLabel: true
        },
        legend: {
          data: ['产线产量', '产线良品率'],
          textStyle: {
            fontSize: 12 * this.beilv,
            color: '#ced1d5'
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#213259', // 左边线的颜色
              width: '1' // 坐标线的宽度
            }
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
            }
          },
          splitLine: {
            lineStyle: {
              color: '#213259'
            }
          },
          data: nameList
        },
        // yAxis: {

        // },
        yAxis: [
          {
            min: function() { // 取最小值向下取整为最小刻度
              return 0
            },
            max: function(value) { // 取最大值向上取整为最大刻度
              return Math.ceil(value.max)
            },
            scale: true,
            type: 'value',
            name: '良品率/%',
            nameTextStyle: {// y轴上方单位的颜色
              color: '#fff'
            },
            position: 'right',
            alignTicks: true,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#213259', // 左边线的颜色
                width: '1' // 坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#ced1d5', // 坐标值得具体的颜色
                formatter: '{value}%'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#213259'
              }
            }
            // 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: {// y轴上方单位的颜色
              color: '#fff'
            },
            position: 'left',
            alignTicks: true,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#213259', // 左边线的颜色
                width: '1' // 坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
                formatter: '{value} 片'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#213259'
              }
            }
            // type: 'value'
            // axisLine: {
            //   show: true,
            //   lineStyle: {
            //     color: colors[1]
            //   }
            // },
          }
        ],
        series: series
      })
    }
  }
}
</script>