一贷岸、引入ec-canvas文件
https://github.com/ecomfe/echarts-for-weixin
“ec-canvas”
二、配置json
{
"usingComponents":{
"ec-canvas":"../../ec-canvas/ec-canvas"
}
}
三矛纹、書寫結(jié)構(gòu)
<!--logs.wxml-->
<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:["周一","周二","周三","周四","周五","周六","周日"]
},
yAxis:{
x:"center",
type:"value",
splitLine:{
lineStyle:{
type:"solid"
}
}
},
series:[{
name:'A',
type:"line",
smooth:true,
data:[18,36,65,30,78,40,33]
}, {
name: 'B',
type: "line",
smooth: true,
data: [12, 50, 51, 35, 70, 40, 33]
}
, {
name: 'C',
type: "line",
smooth: true,
data: [10, 30, 31, 50, 40, 20, 33]
}]
}
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))
})
})
}
})
