＜微信小程序＞调用echarts库，接口拿取数据库数据，实现折线图，横坐标可拉伸

首先下载echarts官方库

[https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts]
其中有详细讲解如何导入，个人简单总结一下
1、ec-canvas文件夹复制粘贴在自己项目文件中。
2、在页面中调用

import * as echarts from '../../ec-canvas/echarts';

3、本文以折线图进行讲解，用户只需要更改配置中的option即可
以上所有准备已经做好可以进行下一步，拿取数据，将数据放入你所要放的位置

微信小程序拿取数据

由于接口返回的数据格式不符和我们所要的样式，将接口数据进行遍历，拿取我们所需要的值放入空数组中。

for (var i = 0; i < res.data.data.length; i++) {
        //将数据库的数据 遍历到每个对应的数组中 
        app.globalData.time[j] = res.data.data[i].time
      }

数据对接

折线图、横坐标的赋值皆为数组类型，将微信小程序遍历出来的数组对应放入x轴，y轴，折线图就可以显示！

xAxis: {
      type: 'category',
      boundaryGap: false,
      data: app.globalData.time,
      // show: false
      axisLabel: {
        interval: 0,
        rotate: 90, // 90度角倾斜显示
        textStyle: {
          color: '#00c5d7'
        }
      },
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },

这个demo还进行了其他设置，如选择性显示：

legend: {
      show: true,
      icon: 'rect',
      data: ['A', 'B', 'C', 'D'],
      selected: {  //方便初始化显示
        "B": false, 
        "C": false,
        "D": false
      }
    }

折线图拉伸：

dataZoom: [{
      type: 'slider', //图表下方的伸缩条
      realtime: true
    }]

效果图如下，具体其他配置

！！！！导入echarts遇到的坑

刚开始看网上的资料，导入后发现就是不显示，最终才知道，一定要在wxss样式中添加container样式！！！！