<template>
  <div id="chartLine" style="width: 100%; height: 100%"></div>
</template>

<script>
  export default {
    name: "chartLine",
    props: ['echartsList'],
    methods: {
      drawChart() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("chartLine"));
        let that = this;
        let options = {
          title: {
            text: '',
            x: 'center',
            y: 'top',
            textStyle: {
              fontSize: 16,
              color: '#ffffff'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [],
            textStyle: {
              color: 'white',
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              alignWithLabel: true
            },
            data: [],
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white',  //更改坐标轴文字颜色
              }
            },
          },
          yAxis: {
            type: 'value',
            name: '',
            axisLabel: {
              show: true,
              textStyle: {
                color: 'white',  //更改坐标轴文字颜色
              }
            },
          },
          series: [
            {
              type: 'bar',
              data: [],
            },
          ]
        };
        options.title.text = this.echartsList[2][0] + '监测';
        options.legend.data = this.echartsList[2][0];
        options.xAxis.data = this.echartsList[1];
        options.yAxis.name = this.echartsList[2][1];
        options.series[0].name = this.echartsList[2][0];
        options.series[0].data = this.echartsList[0];

        myChart.setOption(options);
      },
    },
    mounted() {
      this.drawChart();
    }
  }
</script>

<style scoped>

</style>
