<template>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="chart2Line" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
//import testdata from './testdata'
export default {
  data() {
    return {
      //testdata
    };
  },
  mounted() {
    this.initChartLine();
  },
  activated() {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.chart2Line) {
      this.chart2Line.resize();
    }
  },
  methods: {
    // 折线图
    initChartLine() {
      var option = {
        title: {
          text: "2折线图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        color: ["#f8f106", "#fe7576", "#a9b0d3", "#476fd4"],
        //多个图，就有多个grid,排序默认0、1、2....
        grid: [
          //0降雨
          { x: "7%", y: "7%", height: "35%", left: "10%" },
          //1水位流量
          { x: "7%", y2: "7%", height: "35%", left: "10%", bottom: "15%" },
        ],
        legend: {
          data: ["降水量", "测试"],
        },
        xAxis: [
          {
            show: false, //隐藏了x轴
            type: "category",
            gridIndex: 0, //对应前面grid的索引位置（第一个）
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              //interval:showNum,  //x轴显示的数量，我这里是动态算的
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
          {
            type: "category",
            gridIndex: 1, //对应前面grid的索引位置（第二个）
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              //interval:showNum,
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        //y轴，不管有几个x轴，几个y轴，或者图，只要找到他对应的grid图的序号索引就可以精准匹配

        yAxis: [
          {
            type: "value",
            gridIndex: 1,
            nameLocation: "middle",
            name: "降水量",
            splitLine: { show: false },
            nameTextStyle: {
              padding: 25,
            },
            position: "left",
            axisLine: {
              show: true,
              lineStyle: {
                //color: colors[2]
              },
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            gridIndex: 0,
            name: "测试",
            splitLine: { show: false },
            nameTextStyle: {
              padding: 25,
            },
            nameLocation: "middle",
            position: "left",
            //nameLocation: 'start',//y轴name的位置
            //inverse: true,
            axisLine: {
              show: true,
              lineStyle: {
                //color: colors[1]
              },
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontSize: 12, //y轴坐标轴上的字体大小
              },
            },
          },
        ],

        dataZoom: [
          // 轴放大
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            start: 0,
            end: 100
          },
          {
            type: 'inside',
            xAxisIndex: [0,1],
            start: 0,
            end: 100
          },
          {
            show: true,
            yAxisIndex: 0,
            realtime: true,
            left: 6,
            start: 0,
            end: 100
          },
          {
            show: true,
            yAxisIndex: 1,
            realtime: true,
            left: 6,
            start: 0,
            end: 100
          },
        ],
        series: [
          {
            name: "降水量",
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 1,
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
          },
          {
            name: "测试",
            type: "line",
            xAxisIndex: 1,
            yAxisIndex: 0,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
          },
        ],
      };
      this.chart2Line = echarts.init(document.getElementById("chart2Line"));
      this.chart2Line.setOption(option);
      window.addEventListener("resize", () => {
        this.chart2Line.resize();
      });
    },
  },
};
</script>

<style lang="scss">
.mod-demo-echarts {
  > .el-row {
    margin-top: -10px;
    margin-bottom: -10px;
    .el-col {
      padding-top: 10px;
      padding-bottom: 10px;
    }
  }
  .chart-box {
    min-height: 400px;
  }
}
</style>
