小程序echarts折线图

index.js

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

const util = require('../../utils/util.js')
const app = getApp();

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(chart);

  var option = {
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    legend: {
      textStyle:{
        // color: "RGB(193,223,255)"
        color:'white'
      },
      data:['平均值', '总和','最新值'],
      top: 0,
      left: 'center',
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: 'white'
          // color: "RGB(47,68,114)"
        }
      },
      axisLabel: {
        textStyle: {
          fontFamily: 'Microsoft YaHei',
          color: 'white'
          // color: "RGB(145,155,183)"
        }
      },
      data: ['2020-1-2', '2020-1-4', '2020-1-5', '2020-1-8', '2020-1-21', '2020-1-23', '2020-3-3'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: 'white'
          // color: "RGB(47,68,114)"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255,255,255,0.3)'
        }
      },
      axisLabel: {
        textStyle: {
         fontFamily: 'Microsoft YaHei',
        //  color: "RGB(145,155,183)"
        color: 'white'
       }
     }
      // show: false
    },
     //dataZoom 高度
     dataZoom: [{
      "show": true,
      "height": 12,
      "xAxisIndex": [
        0
      ],
      bottom:'5%',
      "start": 10,
      "end": 90,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '100%',
      handleStyle:{
        color:"#d3dee5",

      },
      textStyle:{
        color:"#000"},
      borderColor:"#90979c"
    }, {
        type: 'inside',
        start: 0,
        end: 100
    }],
    series: [{
      name: '平均值',
      type: 'line',
      smooth: true,
      areaStyle: {
        normal: {
        color: '#37A2DA' //改变区域颜色
        }
      },
      data: [18, 36, 65, 30, 78, 40, 33]
    }, {
      name: '总和',
      type: 'line',
      smooth: true,
      areaStyle: {
        normal: {
        color: '#67E0E3' //改变区域颜色
        }
      },
      data: [12, 50, 51, 35, 70, 30, 20]
    }, {
      name: '最新值',
      type: 'line',
      smooth: true,
      areaStyle: {
        normal: {
        color: '#9FE6B8' //改变区域颜色
        }
      },
      data: [10, 30, 31, 50, 40, 20, 10]
    }]
  };

  chart.setOption(option);
  return chart;
}

Page({

  /**
   * 页面的初始数据
   */
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      onInit: initChart
    },
    pointList:[
      {
          "point":"AR_TEST_VAR1",
          "pointName":"测试单位",
          "pointValue":"0.0",
          "pointUnit":null,
          "lastUpdateTime":"2020-07-08 20:39:00"
      },
      {
          "point":"AR_TEST_VAR2",
          "pointName":"测试点位2",
          "pointValue":"0.0",
          "pointUnit":"无",
          "lastUpdateTime":"2020-07-08 20:39:00"
      },
    ],
    imageUrl:"/images/shebei.jpg",
  },
  bindHome:function(){
    wx.navigateTo({
      // url: '../logs/logs'
      url: '/pages/index/index'
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({ title: '设备详情' })  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.html

  <view class="box">
    <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
  </view>

index.json

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

index.wxss

.box{
  width:100%;
  height:850rpx;
  margin-top: 70rpx;
}
ec-canvas {
  width: 100%;
  height: 100%;
}