小程序echarts

https://github.com/ecomfe/echarts-for-weixin

“ec-canvas”

二、配置json

{

"usingComponents":{

"ec-canvas":"../../ec-canvas/ec-canvas"

}

}

三、书写结构

<view class="container log-list">

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

</view>

四、js文件

//logs.js

const util = require('../../utils/util.js')

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

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:{

data:["A","B","C"],

top:20,

left:"center",

z:100

},

grid:{

left:"3%",

right:"4%",

bottom:"3%",

containLabel:true

},

xAxis:{

type:"category",

boundaryGap:false,

data:["周一","周二","周三","周四","周五","周六","周日"]

}

chart.setOption(option)

return chart

}

Page({

onShareAppMessage:function(res){

return{

title:"Echarts",

path:"/pages/index/index",

success:function(){},

fail:function(){}

}

},

data: {

ec:{

onInit:initChart

},

logs: []

},

onReady(){},

onLoad: function () {

this.setData({

logs: (wx.getStorageSync('logs') || []).map(log =>{

return util.formatTime(new Date(log))

})

})

}

})

页面用到多个echarts图表，图表的类型都是一样的折线图，只是图表里面数据每个都不一样，然后渲染的图表个数是不确定的，根据搜索条件返回的数据来决定渲染几个图表。

微信小程序是一种不需要下载安装即开即用的应用，可实现现用app应用70%的功能，用户扫一扫或者搜索即可使用，快捷方便使得微信小程序在我们生活中已经广泛使用。