<template>
  <div :id="id" :style="{width: containerSize.width, height: containerSize.height}">
  </div>
</template>

<script type="text/ecmascript-6">
import * as echarts from 'echarts'
export default {
  name: 'LeftEcharts',
  props: {
    id: {
      type: String,
      default: 'LeftEcharts'
    },
    containerSize: {
      type: Object,
      default: null,
      width: {
        type: String,
        default: null
      },
      height: {
        type: String,
        default: null
      }
    },
    dataSource: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
    }
  },
  mounted() {
    // this.initEchartsData()
  },

  methods: {
    initEchartsData() {
      const legendData = [
        { name: '新增量', icon: 'circle' },
        { name: '变更量', icon: 'circle' },
        { name: '审批量', icon: 'circle' }
      ]
      const { id, dataSource } = this
      const { xData, addData, approveData, editData } = dataSource
      const myChart = echarts.init(document.getElementById(id))
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '20%',
          top: '10%',
          containLabel: true
        },
        legend: {
          data: legendData,
          bottom: '10%',
          textStyle: {
            fontSize: 15,
            color: '#666666'
          },
          itemWidth: 12,
          itemHeight: 10
        },

        xAxis: {
          type: 'category',
          data: xData,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#f2f2f2'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: '#666666'
            }
          }
        },

        yAxis: {
          type: 'value',
          // max: '30',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#f2f2f2'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#666666'
            }
          }
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: '3%',
            start: 1,
            end: 70,
            handleSize: '100%',
            handleStyle: {
              color: '#d3dee5'
            },
            textStyle: {
              color: '#fff'
            },
            borderColor: '#d3dee5'
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: '新增量',
            type: 'bar',
            barWidth: '12',
            itemStyle: {
              normal: {
                color: '#4ba5f7',
                barBorderRadius: 6
              }
            },
            data: addData
          },
          {
            name: '变更量',
            type: 'bar',
            barWidth: '12',
            itemStyle: {
              normal: {
                color: '#4ecb73',
                barBorderRadius: 6
              }
            },
            data: editData
          },
          {
            name: '审批量',
            type: 'bar',
            barWidth: '12',
            itemStyle: {
              normal: {
                color: '#fbc137',
                barBorderRadius: 6
              }
            },
            data: approveData
          }
        ]
      }

      myChart.setOption(option)
      }
  }
}
</script>
