微信小程序单页面使用echarts组件实现两个折线图

今天呢，放一个很早以前做的一个echarts组件的引用和实现。话不多说，上图片之后在上代码。

这些代码都是我单独运行了才放上来得，应该可以直接用，有个问题是，X轴如果超过7个的话，会看不到后续的X轴，X轴的单位位置也只能在这条线上，比较无奈。

首先呢，要去下载echarts插件包放在你的小程序里面
接着就按照echarts的文档来查看属性，代码里放入你需要的属性就可以了。

wxml代码，这是两个折线图的数据渲染

<view class="container1">
	<view class='echart_wrap'>
		<ec-canvas id="mychart" canvas-id="mychart-line" ec="{
  { ec1 }}"></ec-canvas>
	</view>
</view>


<view class="divLine"></view>

<view class="container1">
	<view class='echart_wrap'>
		<ec-canvas id="mychart" canvas-id="mychart-line" ec="{
  { ec2 }}"></ec-canvas>
	</view>
</view>

wcss代码

.echart_wrap{
  width: 100%;
  height: 680rpx;
}
ec-canvas {
  width: 100%;
  height: 100%;
}

.divLine {
  background: #F4F4F4;
  width: 100%;
  height: 20rpx;
}

接着，也是重要的json里面引入

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

最后是js代码，不懂得我注释在代码里面了。

import * as echarts from '../../../ec-canvas/echarts';
var barec1 = null
var barec2 = null
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec1: {
      onInit: function (canvas, width, height) {
        barec1 = echarts.init(canvas, null, {
          widt