可视化数据动态展示数据的echarts标准写法

步骤1：引入echarts

步骤2：准备一个呈现图表的盒子

步骤3：初始化echarts实例对象

步骤4：准备配置项

步骤5：将配置项设置给echarts实例对象

实例化如下：

1. 初始化图表对象：initChart() ---初始化配置 initOption

2. 获取数据：getData() 对allData进行赋值

3. 处理数据更新图表：updateChart(){}  ---获取数据之后的配置 dataOption

4.分辨率适配的配置 ：

        (1)窗口大小变化事件的监听resize --- screenAdapter ---分辨率适配的配置项adapterOption

        (2)组件销毁时取消监听

配置文件单独拿出来以便于复用：

echartLine.js

const optionLine={
        title: {
          text: '▎商家销售统计',
          left: 20,
          top: 20,
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          // 默认grid不包含坐标轴文字，改为true
          containLabel: true,
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
        },
        tooltip: {
          // 当鼠标移入axis(坐标轴)时展示 底层的背景色
          trigger: 'axis',
          axisPointer: {
            // 展示的类型是线条类型
            type: 'line',
            lineStyle: {
              color: this.axisPointerColor,
            },
            // 相等于 z-index 将层级调低
            z: 0,
          }
        },
        series: [
          {
            ty