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%的功能,用户扫一扫或者搜索即可使用,快捷方便使得微信小程序在我们生活中已经广泛使用。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)