Echarts的使用在vue中

<template>
  <v-scale-screen
    width="1920"
    height="1080"
    class="app"
    style="transform: scale(1, 1); background-color: #fff"
  >
    <div ref="main" style="width: 600px; height: 400px"></div>
    <div ref="dome" style="width: 600px; height: 400px"></div>
  </v-scale-screen>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import VScaleScreen from "v-scale-screen";
import { ref, onMounted } from "vue";
//  按需引入 echarts
const main = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
const dome = ref();
onMounted(() => {
  init();
});
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value);
  var myChartz = echarts.init(dome.value);

  var datas = [
    [
      { name: "银河帝国5：迈向基地", value: 3.8 },
      { name: "俞军产品方法论", value: 2.3 },
      { name: "艺术的逃难", value: 2.2 },
      { name: "第一次世界大战回忆录（全五卷）", value: 1.3 },
      { name: "Scrum 精髓", value: 1.2 },
      { name: "其它", value: 5.7 },
    ],
  ];
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: "阅读书籍分布",
      left: "center",
      top: "center",
      textStyle: {
        color: "#999",
        fontWeight: "normal",
        fontSize: 12,
      },
    },
    series: datas.map(function (data) {
      return {
        type: "pie",
        radius: [120, 100],
        height: "33.33%",
        left: "center",
        top: "center",
        width: 500,
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          alignTo: "edge",
          formatter: "{name|{b}}\n{time|{c} 小时}",
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: "#999",
            },
          },
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80,
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80,
        },
        labelLayout: function (params: any) {
          const isLeft = params.labelRect.x < myChart.getWidth() / 2;
          const points = params.labelLinePoints;
          // Update the end point.
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width;
          return {
            labelLinePoints: points,
          };
        },
        data: data,
      };
    }),
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  

//第二次引入

option = {
  title: {
    text: 'Rainfall and Flow Relationship',
    left: 'center'
  },
  grid: {
    bottom: 80
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      animation: false,
      label: {
        backgroundColor: '#505765'
      }
    }
  },
  legend: {
    data: ['Flow', 'Rainfall'],
    left: 10
  },
  dataZoom: [
    {
      show: true,
      realtime: true,
      start: 65,
      end: 85
    },
    {
      type: 'inside',
      realtime: true,
      start: 65,
      end: 85
    }
  ],
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: { onZero: false },
      // prettier-ignore
      data: [
              0/15 14:00', '2009/10/15 15:00', '2009/10/15 16:00', '2009/10/15 17:00', '2009/10/15 18:00', '2009/10/15 19:00', '2009/10/15 20:00', '2009/10/15 21:00', '2009/10/15 22:00', '2009/10/15 23:00', '2009/10/16 0:00', '2009/10/16 1:00', '2009/10/16 2:00', '2009/10/16 3:00', '2009/10/16 4:00', '2009/10/16 5:00', '2009/10/16 6:00', '2009/10/16 7:00', '2009/10/16 8:00', '2009/10/16 9:00', '2009/10/16 10:00', '2009/10/16 11:00', '2009/10/16 12:00', '2009/10/16 13:00', '2009/10/16 14:00', '2009/10/16 15:00', '2009/10/16 16:00', '2009/10/16 17:00', '2009/10/16 18:00', '2009/10/16 19:00', '2009/10/16 20:00', '2009/10/16 21:00', '2009/10/16 22:00', '2009/10/16 23:00', '2009/10/17 0:00', '2009/10/17 1:00', '2009/10/17 2:00', '2009/10/17 3:00', '2009/10/17 4:00', '2009/10/17 5:00', '2009/10/17 6:00', '2009/10/17 7:00', '2009/10/17 8:00', '2009/10/17 9:00', '2009/10/17 10:00', '2009/10/17 11:00', '2009/10/17 12:00', '2009/10/17 13:00', '2009/10/17 14:00', '2009/10/17 15:00', '2009/10/17 16:00', '2009/10/17 17:00', '2009/10/17 18:00', '2009/10/17 19:00', '2009/10/17 20:00', '2009/10/17 21:00', '2009/10/17 22:00', '2009/10/17 23:00', '2009/10/18 0:00', '2009/10/18 1:00', '2009/10/18 2:00', '2009/10/18 3:00', '2009/10/18 4:00', '2009/10/18 5:00', '2009/10/18 6:00', '2009/10/18 7:00', '2009/10/18 8:00'
            ].map(function (str) {
                return str.replace(' ', '\n');
            })
    }
  ],
  yAxis: [
    {
      name: 'Flow(m³/s)',
      type: 'value'
    },
    {
      name: 'Rainfall(mm)',
      nameLocation: 'start',
      alignTicks: true,
      type: 'value',
      inverse: true
    }
  ],
  series: [
    {
      name: 'Flow',
      type: 'line',
      areaStyle: {},
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      markArea: {
        silent: true,
        itemStyle: {
          opacity: 0.3
        },
        data: [
          [
            {
              xAxis: '2009/9/12\n7:00'
            },
            {
              xAxis: '2009/9/22\n7:00'
            }
          ]
        ]
      },
      // prettier-ignore
      data: [
                0.97, 0.96, 0.96, 0.95, 0.95, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.93, 0.92, 0.91, 0.9, 0.89, 0.88, 0.87, 0.87, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.87, 0.88, 0.9, 0.93, 0.96, 0.99, 1.03, 1.06, 1.1, 1.14, 1.17, 1.2, 1.23, 1.26, 1.29, 1.33, 1.36, 1.4, 1.43, 1.45, 1.48, 1.49, 1.51, 1.51, 1.5, 1.49, 1.47, 1.44, 1.41, 1.37, 1.34, 1.3, 1.27, 1.24, 1.22, 1.2, 1.19, 1.18, 1.16, 1.15, 1.14, 1.13, 1.12, 1.11, 1.11, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.1, 1.09, 1.09, 1.08, 1.07, 1.06, 1.05, 1.04, 1.03, 1.03, 1.02, 1.01, 1.01, 1, 0.99, 0.98, 0.97, 0.96, 0.96, 0.95, 0.95, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.93, 0.92, 0.91, 0.9, 0.89, 0.88, 0.87, 0.87, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.85, 0.84, 0.83, 0.82, 0.81, 0.8, 0.8, 0.79, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.77, 0.75, 0.73, 0.71, 0.68, 0.65, 0.63, 0.61, 0.59, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.57, 0.57, 0.57, 0.56, 0.55, 0.55, 0.54, 0.54, 0.53, 0.52, 0.52, 0.51, 0.51, 0.5, 0.5, 0.49, 0.48, 0.48, 0.47, 0.47, 0.47, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.46, 0.52, 0.67, 0.9, 1.19, 1.52, 1.87, 2.22, 2.55, 2.84, 3.07, 3.22, 3.28, 3.28, 3.28, 3.28, 3.28, 3.28, 3.28, 3.28, 3.28, 3.28, 3.28, 3.28, 3.28, 3.24, 3.13, 2.97, 2.77, 2.54, 2.3, 2.05, 1.82, 1.62, 1.46, 1.35, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.31, 1.3, 1.26, 1.21, 1.14, 1.06, 0.97, 0.89, 0.81, 0.74, 0.69, 0.65, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.63, 0.63, 0.62, 0.62, 0.61, 0.6, 0.59, 0.59, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.59, 0.61, 0.63, 0.65, 0.68, 0.71, 0.73, 0.75, 0.77, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.77, 0.75, 0.73, 0.71, 0.68, 0.65, 0.63, 0.61, 0.59, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.59, 0.59, 0.6, 0.61, 0.62, 0.62, 0.63, 0.63, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.65, 0.66, 0.68, 0.69, 0.71, 0.73, 0.74, 0.76, 0.77, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.79, 0.81, 0.82, 0.84, 0.86, 0.88, 0.9, 0.92, 0.93, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.94, 0.93, 0.92, 0.91, 0.9, 0.89, 0.88, 0.87, 0.87, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.86, 0.85, 0.84, 0.82, 0.8, 0.78, 0.76, 0.75, 0.73, 0.72, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.72, 0.73, 0.74, 0.76, 0.78, 0.79, 0.82, 0.84, 0.86, 0.89, 0.91, 0.94, 0.97, 1, 1.02, 1.05, 1.08, 1.11, 1.14, 1.17, 1.19, 1.22, 1.25, 1.27, 1.29, 1.31, 1.33, 1.35, 1.36, 1.38, 1.39, 1.39, 1.4, 1.4, 1.4, 1.39, 1.37, 1.35, 1.32, 1.29, 1.26, 1.22, 1.18, 1.14, 1.1, 1.05, 1.01, 0.97, 0.93, 0.89, 0.85, 0.82, 0.78, 0.76, 0.74, 0.72, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.72, 0.73, 0.74, 0.75, 0.77, 0.78, 0.8, 0.82, 0.84, 0.87, 0.89, 0.92, 0.94, 0.97, 0.99, 1.02, 1.05, 1.08, 1.1, 1.13, 1.16, 1.18, 1.21, 1.23, 1.26, 1.28, 1.3, 1.32, 1.34, 1.35, 1.37, 1.38, 1.39, 1.4, 1.41, 1.41, 1.42, 1.42, 1.43, 1.43, 1.43, 1.44, 1.44, 1.44, 1.44, 1.45, 1.45, 1.45, 1.46, 1.46, 1.46, 1.47, 1.47, 1.48, 1.48, 1.49, 1.5, 1.51, 1.54, 1.62, 1.73, 1.88, 2.05, 2.24, 2.45, 2.67, 2.89, 3.11, 3.31, 3.51, 3.69, 3.86, 4.03, 4.18, 4.33, 4.48, 4.62, 4.76, 4.89, 5.02, 5.16, 5.29, 5.43, 5.57, 5.71, 5.86, 6.02, 6.18, 6.36, 6.54, 6.73, 6.93, 7.15, 7.38, 7.62, 7.88, 8.16, 8.46, 8.77, 9.11, 9.46, 9.84, 10.24, 10.67, 11.12, 11.6, 12.3, 13.66, 16, 38.43, 82.21, 146.6, 218.7, 226, 225.23, 223.08, 219.78, 212, 199.82, 184.6, 168, 151.65, 137.21, 126.31, 119.94, 115.52, 112.06, 108.92, 105.44, 101, 94.56, 86.36, 77.67, 69.76, 63.9, 60.38, 57.41, 54.84, 52.57, 50.56, 48.71, 46.97, 45.25, 43.48, 41.6, 39.5, 37.19, 34.81, 32.46, 30.27, 28.36, 26.85, 25.86, 25.5, 25.5, 25.5, 25.5, 25.5, 25.5, 25.5, 25.5, 25.5, 25.5, 25.5, 25.5, 25.5, 25.27, 24.65, 23.7, 22.52, 21.17, 19.75, 18.33, 16.98, 15.8, 14.85, 14.23, 14, 14.02, 14.08, 14.17, 14.29, 14.44, 14.61, 14.8, 15.01, 15.23, 15.47, 15.71, 15.95, 16.19, 16.43, 16.67, 16.89, 17.1, 17.29, 17.46, 17.61, 17.73, 17.82, 17.88, 17.9, 17.63, 16.88, 15.75, 14.33, 12.71, 10.98, 9.23, 7.56, 6.05, 4.81, 3.92, 3.47, 3.28, 3.1, 2.93, 2.76, 2.61, 2.46, 2.32, 2.19, 2.07, 1.96, 1.85, 1.75, 1.66, 1.58, 1.51, 1.44, 1.39, 1.34, 1.29, 1.26, 1.23, 1.22, 1.2, 1.2, 1.2, 1.2, 1.2, 1.2, 1.21, 1.21, 1.21, 1.21, 1.22, 1.22, 1.22, 1.23, 1.23, 1.23, 1.24, 1.24, 1.25, 1.25, 1.25, 1.26, 1.26, 1.27, 1.27, 1.27, 1.28, 1.28, 1.28, 1.29, 1.29, 1.29, 1.29, 1.3, 1.3, 1.3, 1.3, 1.3, 1.3, 1.3, 1.3, 1.3, 1.3, 1.3, 1.29, 1.29, 1.29, 1.29, 1.28, 1.28, 1.28, 1.27, 1.27, 1.26, 1.25, 1.25, 1.24, 1.23, 1.23, 1.22, 1.21, 1.2, 1.16, 1.06, 0.95, 0.83, 0.74, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.71, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.69, 0.69, 0.69, 0.69, 0.69, 0.69, 0.69, 0.69, 0.68, 0.68, 0.68, 0.68, 0.68, 0.68, 0.67, 0.67, 0.67, 0.67, 0.67, 0.67, 0.67, 0.66, 0.66, 0.66, 0.66, 0.66, 0.66, 0.66, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.65, 0.66, 0.68, 0.69, 0.71, 0.73, 0.74, 0.76, 0.77, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.8, 0.86, 0.95, 1.08, 1.25, 1.46, 1.7, 1.97, 2.28, 2.63, 3.01, 3.42, 3.87, 4.35, 4.86, 5.4, 5.98, 6.59, 7.92, 10.49, 14.04, 18.31, 23.04, 27.98, 32.87, 37.45, 41.46, 44.64, 46.74, 47.5, 46.86, 45.16, 42.77, 40.04, 37.33, 35, 32.74, 30.21, 27.7, 25.5, 23.9, 23.2, 23.06, 22.94, 22.84, 22.77, 22.72, 22.7, 22.8, 23.23, 23.95, 24.91, 26.04, 27.3, 28.76, 30.7, 33.39, 37.12, 42.15, 48.77, 65.22, 252.1, 257, 237.32, 221.19, 212, 208.67, 206.89, 205.2, 202.15, 189.82, 172, 165.3, 160.49, 156.8, 153.44, 149.62, 144.6, 138.27, 131, 123.11, 114.9, 106.69, 98.79, 91.5, 85.13, 80, 75.53, 71.03, 66.65, 62.54, 58.85, 55.73, 53.31, 51.75, 51.2, 56.53, 68.25, 80, 91.01, 102.03, 109, 112.37, 115.29, 117.68, 119.48, 120.61, 121, 119.45, 115.57, 110.52, 105.47, 101.58, 100, 99.97, 99.94, 99.92, 99.9, 99.88, 99.86, 99.85, 99.84, 99.83, 99.82, 99.81, 99.81, 99.8, 99.8, 99.8, 122.15, 163.65, 186, 182.96, 175.15, 164.56, 153.18, 143, 136, 131.37, 126.98, 122.81, 118.85, 115.09, 111.52, 108.13, 104.9, 101.83, 98.9, 96.11, 93.44, 90.87, 88.41, 86.04, 83.74, 81.51, 79.33, 77.2, 75.1, 73.02, 70.95, 68.88, 66.8, 64.87, 63.14, 61.4, 59.53, 57.67, 56, 54.6, 53.36, 52.2, 51.05, 49.85, 48.5, 46.87, 44.92, 42.74, 40.42, 38.04, 35.69, 33.46, 31.44, 29.72, 28.38, 27.51, 27.2, 27.2, 27.2, 27.2, 27.2, 27.2, 27.2, 27.2, 27.2, 27.2, 27.2, 27.2, 27.2, 27.14, 26.97, 26.7, 26.35, 25.95, 25.49, 25.02, 24.53, 24.04, 23.58, 23.16, 22.8, 22.46, 22.11, 21.75, 21.39, 21.03, 20.69, 20.36, 20.05, 19.78, 19.54, 19.35, 19.2, 19.09, 19, 18.92, 18.85, 18.79, 18.74, 18.68, 18.62, 18.56, 18.49, 18.4, 18.3, 18.17, 18.02, 17.83, 17.63, 17.41, 17.18, 16.93, 16.68, 16.43, 16.18, 15.93, 15.7, 15.47, 15.22, 14.97, 14.71, 14.45, 14.18, 13.93, 13.68, 13.44, 13.21, 13, 12.8, 12.62, 12.46, 12.31, 12.16, 12.03, 11.89, 11.76, 11.62, 11.48, 11.33, 11.17, 11, 10.81, 10.59, 10.36, 10.12, 9.86, 9.61, 9.36, 9.12, 8.89, 8.68, 8.5, 8.35, 8.21, 8.08, 7.94, 7.81, 7.68, 7.56, 7.46, 7.36, 7.29, 7.23, 7.19, 7.18, 7.51, 8.42, 9.81, 11.58, 13.63, 15.86, 18.16, 20.44, 22.58, 24.49, 26.06, 27.2, 28.08, 28.95, 29.81, 30.65, 31.48, 32.28, 33.07, 33.82, 34.55, 35.25, 35.92, 36.56, 37.15, 37.71, 38.23, 38.7, 39.13, 39.5, 39.83, 40.1, 40.31, 40.47, 40.57, 40.6, 40.49, 40.16, 39.64, 38.94, 38.09, 37.1, 36, 34.79, 33.51, 32.17, 30.79, 29.39, 27.99, 26.6, 25.25, 23.96, 22.75, 21.63, 20.63, 19.76, 19.04, 18.49, 18.14, 18, 17.97, 17.95, 17.94, 17.92, 17.91, 17.9, 17.89, 17.88, 17.87, 17.85, 17.83, 17.8, 17.7, 17.46, 17.13, 16.7, 16.21, 15.68, 15.13, 14.57, 14.04, 13.56, 13.14, 12.8, 12.52, 12.27, 12.02, 11.79, 11.57, 11.37, 11.16, 10.97, 10.78, 10.59, 10.39, 10.2, 10.01, 9.81, 9.63, 9.44, 9.26, 9.08, 8.9, 8.73, 8.56, 8.39, 8.22, 8.06, 7.9, 7.73, 7.57, 7.41, 7.25, 7.09, 6.94, 6.79, 6.65, 6.52, 6.4, 6.28, 6.17, 6.08, 5.98, 5.9, 5.81, 5.73, 5.65, 5.57, 5.49, 5.41, 5.32, 5.23, 5.14, 5.04, 4.94, 4.84, 4.74, 4.63, 4.53, 4.43, 4.33, 4.23, 4.13, 4.03, 3.93, 3.81, 3.69, 3.57, 3.45, 3.33, 3.22, 3.12, 3.04, 2.98, 2.93, 2.92, 2.92, 2.92, 2.92, 2.92, 2.92, 2.92, 2.92, 2.92, 2.92, 2.92, 2.92, 2.92, 2.9, 2.86, 2.8, 2.71, 2.62, 2.52, 2.42, 2.33, 2.24, 2.18, 2.14, 2.12, 2.12, 2.12, 2.12, 2.12, 2.12, 2.12, 2.12, 2.12, 2.12, 2.12, 2.12, 2.12, 2.1, 2.06, 2, 1.91, 1.82, 1.71, 1.61, 1.5, 1.4, 1.32, 1.25, 1.2, 1.16, 1.13, 1.1, 1.06, 1.03, 1, 0.97, 0.93, 0.9, 0.87, 0.85, 0.82, 0.79, 0.77, 0.74, 0.72, 0.69, 0.67, 0.65, 0.63, 0.61, 0.59, 0.58, 0.56, 0.54, 0.53, 0.52, 0.51, 0.5, 0.49, 0.48, 0.48, 0.47, 0.47, 0.46, 0.46, 0.47, 0.48, 0.5, 0.53, 0.56, 0.59, 0.62, 0.64, 0.67, 0.69, 0.7, 0.71, 0.71, 0.71, 0.71, 0.7, 0.7, 0.7, 0.69, 0.69, 0.69, 0.68, 0.68, 0.67, 0.67, 0.67, 0.66, 0.66, 0.65, 0.65, 0.65, 0.65, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.65, 0.65, 0.65, 0.66, 0.66, 0.67, 0.68, 0.69, 0.69, 0.7, 0.71, 0.73, 0.74, 0.75, 0.76, 0.78, 0.8, 0.81, 0.83, 0.85, 0.87, 0.89, 0.92, 0.94, 0.97, 0.99, 1.02, 1.05, 1.08, 1.11, 1.15, 1.18, 1.32, 1.66, 2.21, 2.97, 3.94, 5.11, 6.5, 8.1, 9.9, 11.92, 14.15, 16.6, 22.3, 22.8, 24.48, 30.38, 35.74, 42.4, 57.14, 94.04, 112.9, 123.4, 130.4, 130, 119.4, 120.7, 116.8, 118.1, 119.4, 124.8, 143.5, 204, 294, 319.2, 328.4, 365, 350.8, 347.6, 347.6, 325, 331.6, 319.2, 308, 308, 308, 308, 296.8, 300, 281, 278.4, 270.6, 271, 253.6, 233.5, 219.2, 207.8, 205.9, 204, 189.6, 178.8, 173.4, 160, 154.4, 146, 145, 140.5, 130.4, 126.2, 116.8, 112.9, 106.5, 101.6, 98.51, 82.67, 67.3, 80.05, 76.12, 72.3, 71.02, 69.78, 67.3, 67.3, 68.54, 57.6, 71.02, 66.06, 59.12, 57.14, 55.16, 55.16, 52.19, 52.19, 51.2, 48.56, 44.16, 43, 45.92, 49.44, 44.16, 36.48, 35.74, 35, 32.36, 37.22, 32.36, 32.36, 32.36, 33.68, 32.36, 31.7, 35.74, 29.72, 32.36, 30.38, 29.72, 28.4, 28.4, 28.4, 27.28, 25.6, 25.04, 23.92, 22.3, 21.8, 21.8, 21.8, 22.8, 21.8, 25.6, 22.8, 22.8, 17.8, 16.04, 16.04, 16.04, 16.04, 16.04, 16.04, 16.04, 16.04, 16.04, 16.04, 15.02, 14, 14.03, 14.11, 14.25, 14.45, 14.72, 15.06, 15.46, 15.95, 16.51, 17.15, 17.87, 18.69, 19.59, 20.59, 21.69, 22.88, 24.18, 25.59, 27.1, 28.73, 30.48, 32.34, 34.33, 36.44, 38.69, 41.06, 43.57, 46.22, 49.01, 51.95, 55.04, 58.27, 61.66, 65.21, 68.92, 72.8, 88.09, 104.9, 105.7, 110.3, 111.6, 110.3, 106.5, 105.7, 103.3, 100, 97.02, 98.8, 91.07, 83.98, 88.09, 81.36, 78.74, 77.43, 77.43, 73.5, 74.81, 72.63, 68.58, 66.4, 68.54, 69.78, 67.3, 64.82, 61.1, 59.12, 56.15, 53.18, 50.32, 49.44, 44.16, 36.5, 42.4, 37.96, 37.22, 33.68, 36.48, 35.74, 35, 35, 37.22, 37.22, 39.44, 32.6, 34.54, 36.48, 35.74, 34.34, 33.68, 33.02, 31.04, 29.72, 29.72, 29.72, 26.16, 25.6, 29.72, 18.3, 22.3, 21.3, 21.8, 21.8, 20.3, 20.8, 25.04, 25.04, 25.6, 25.6, 25.04, 25.6, 25.04, 25.6, 23.92, 25.04, 21.3, 21.8, 22.3, 21.8, 20.8, 16.1, 20.3, 18.3, 13.22, 19.3, 19.3, 18.3, 14.4, 13.86, 13.36, 12.9, 12.48, 12.1, 11.75, 11.43, 11.15, 10.9, 10.67, 10.48, 10.31, 10.16, 10.04, 9.93, 9.85, 9.78, 9.73, 9.69, 9.67, 9.65, 9.65, 12.08, 8.67, 11.7, 11.38, 10.65, 9.84, 9.32, 9.07, 8.85, 8.66, 8.49, 8.35, 8.22, 8.1, 7.98, 7.86, 7.74, 7.61, 7.47, 7.31, 7.14, 6.96, 6.78, 6.58, 6.39, 6.19, 5.99, 5.78, 5.58, 5.39, 5.2, 5.01, 4.83, 4.67, 4.51, 4.37, 4.24, 4.12, 4.02, 3.95, 3.89, 3.85, 3.84, 4.41, 5.77, 7.39, 8.75, 9.32, 9.18, 9, 8.94, 8.88, 8.83, 8.78, 8.73, 8.68, 8.64, 8.6, 8.56, 8.53, 8.5, 8.47, 8.45, 8.42, 8.4, 8.39, 8.37, 8.36, 8.35, 8.35, 8.34, 8.34, 8.67, 9.65, 9.62, 9.53, 9.4, 9.21, 8.98, 8.7, 8.4, 8.06, 7.69, 7.3, 6.89, 6.47, 6.03, 5.59, 5.14, 4.7, 4.26, 3.83, 3.42, 3.02, 2.65, 2.3, 1.98, 1.7, 1.45, 1.25, 1.09, 0.99, 0.94, 0.92, 0.91, 0.89, 0.87, 0.85, 0.84, 0.82, 0.81, 0.79, 0.78, 0.77, 0.75, 0.74, 0.73, 0.72, 0.71, 0.7, 0.69, 0.68, 0.67, 0.66, 0.65, 0.64, 0.64, 0.63, 0.63, 0.62, 0.62, 0.61, 0.61, 0.61, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.6, 0.61, 0.61, 0.61, 0.61, 0.61, 0.61, 0.62, 0.62, 0.62, 0.62, 0.63, 0.63, 0.63, 0.63, 0.63, 0.64, 0.64, 0.64, 0.64, 0.64, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.65, 0.64, 0.63, 0.62, 0.6, 0.59, 0.57, 0.55, 0.54, 0.53, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.51, 0.51, 0.51, 0.5, 0.5, 0.49, 0.48, 0.47, 0.47, 0.46, 0.45, 0.45, 0.44, 0.43, 0.42, 0.42, 0.41, 0.41, 0.41, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.41, 0.42, 0.43, 0.44, 0.46, 0.48, 0.5, 0.53, 0.55, 0.58, 0.61, 0.64, 0.67, 0.7, 0.73, 0.77, 0.8, 0.83, 0.87, 0.9, 0.93, 0.96, 0.99, 1.02, 1.05, 1.08, 1.1, 1.12, 1.14, 1.16, 1.17, 1.18, 1.19, 1.2, 1.2, 1.2, 1.19, 1.17, 1.15, 1.12, 1.09, 1.06, 1.02, 0.98, 0.94, 0.9, 0.86, 0.82, 0.78, 0.74, 0.7, 0.66, 0.63, 0.6, 0.57, 0.55, 0.53, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.52, 0.51, 0.51, 0.5, 0.5, 0.49, 0.49, 0.48, 0.47, 0.47, 0.47, 0.46, 0.46, 0.45, 0.45, 0.45, 0.44, 0.44, 0.44, 0.43, 0.43, 0.43, 0.42, 0.42, 0.42, 0.41, 0.41, 0.41, 0.41, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.4, 0.41, 0.41, 0.41, 0.41, 0.41, 0.41, 0.41, 0.41, 0.41, 0.41, 0.41, 0.41, 0.41, 0.41, 0.41, 0.42, 0.42, 0.42, 0.42, 0.42, 0.42, 0.42, 0.42, 0.42, 0.43, 0.43, 0.43, 0.43, 0.43, 0.43, 0.44, 0.44, 0.44, 0.44, 0.44, 0.44, 0.45, 0.45, 0.45
            ]
    },
    {
      name: 'Rainfall',
      type: 'line',
      yAxisIndex: 1,
      areaStyle: {},
      lineStyle: {
        width: 1
      },
      emphasis: {
        focus: 'series'
      },
      markArea: {
        silent: true,
        itemStyle: {
          opacity: 0.3
        },
        data: [
          [
            {
              xAxis: '2009/9/10\n7:00'
            },
            {
              xAxis: '2009/9/20\n7:00'
            }
          ]
        ]
      },
      // prettier-ignore
      data: [ ]
    }
  ]
};
myChartz.setOption(option);

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.app {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.5s;
  position: relative;
  overflow: hidden;
  z-index: 100;
  transform-origin: left top;
}
</style>