<template>
  <div ref="pl-jdl-chart" class="pl-jdl-chart" style="width: 100%; height: 100%;" />
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'ProductionLineJDLChart',
  props: {},
  data() {
    return {
      chart: null,
      options: {
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   }
        // },
        grid: {
          top: '10%',
          left: '2%',
          right: '5%',
          bottom: 0,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E'],
            axisTick: {
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff3d'
              }
            },
            axisLabel: {
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#ffffff3d'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff3d'
              }
            },
            axisLabel: {
              color: '#ffffff9d'
            }
          }
        ],
        series: [
          {
            type: 'bar',
            barWidth: 10,
            itemStyle: { barBorderRadius: [4, 4, 0, 0] },
            data: [
              {
                value: 110,
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#9DD5FF'
                      },
                      {
                        offset: 1,
                        color: '#1295FF'
                      }
                    ],
                    global: false
                  }
                }
              },
              {
                value: 52,
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#FF8BC3'
                      },
                      {
                        offset: 1,
                        color: '#EB46A1'
                      }
                    ],
                    global: false
                  }
                }
              },
              {
                value: 200,
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#85F6E9'
                      },
                      {
                        offset: 1,
                        color: '#2EC6B4'
                      }
                    ],
                    global: false
                  }
                }
              },
              {
                value: 320,
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#C79DFF'
                      },
                      {
                        offset: 1,
                        color: '#A490FF'
                      }
                    ],
                    global: false
                  }
                }
              },
              {
                value: 95,
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#FFE873'
                      },
                      {
                        offset: 1,
                        color: '#E7AE2A'
                      }
                    ],
                    global: false
                  }
                }
              }
            ]
          }
        ]
      }
    }
  },
  created() {},
  mounted() {
    window.addEventListener('resize', () => {
      if (this.chart) this.chart.resize()
    })

    this.$nextTick(() => {
      if (!this.chart) this.chart = echarts.init(this.$refs['pl-jdl-chart'])
      this.chart.setOption(this.options)
    })
  },
  methods: {}
}
</script>

<style scoped></style>
