小程序echarts

发布网友 发布时间：2022-11-28 06:09

我来回答

共1个回答

热心网友 时间：2023-10-21 14:18

一、引入ec-canvas文件
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))
})
})
}
})