参考文档:echarts官网、echarts-for-weixin
- 第一步引入组件库,可直接从echarts-for-weixin下载,也可以从自定义配置自定义生成,这里我们就不贴了
- 组件库引入好后,就是页面引用啦,废话不多说,直接上代码
index.js:
import * as echarts from '../../components/ec-canvas/echarts'; // 这样引用可避免报init is undefined
let chart = {};
Page({
data: {
ec: {
lazyLoad: true
}
},
onLoad(options) {
this.initChart(1)
},
// 初始化组件
initChart(status) {
const data = this.selectComponent("#mychart-dom-bar" + status)
data.init((canvas, width, height) => {
chart[status] = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: 2
});
canvas.setChart(chart[status]);
this.setOption(status);
return chart[status];
})
},
setOption(i) {
chart[i].clear(); // 清除
chart[i].setOption(this['getOption' + i](), true); //获取新数据
},
getOption1() {
return {
tooltip: {
trigger: 'axis'
},
grid: {
left: 0,
bottom: 0,
top: 25,
containLabel: true
},
xAxis: {
type: 'category',
data: ['洗美', '贴膜', '改装', '改色'],
axisTick: {
show: false
},
axisLabel: {
color: 'rgba(0,0,0,0.45)',
fontWeight: 'bold',
lineHeight: 14,
padding: [10, 0, 19, 0]
},
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0.15)'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
color: 'rgba(0,0,0,0.45)',
fontWeight: 'bold',
lineHeight: 14,
padding: [0, 8, 0, 0]
},
splitLine: {
lineStyle: {
color: 'rgba(0,0,0,0.15)'
}
}
},
series: [{
data: [120, 200, 150, 80],
type: 'bar',
color: '#0E71B2',
label: {
show: true,
position: 'top',
color: '#0E71B2',
fontSize: 16
}
}]
}
},
})
index.wxml:
<view class="ec-container">
<ec-canvas id="mychart-dom-bar1" canvas-id="mychart-bar1" ec="{{ec}}"></ec-canvas>
</view>
index.wxss:文章来源:https://www.toymoban.com/news/detail-623543.html
.ec-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100vw;
height: 600rpx;
padding: 0 20rpx;
}
ec-canvas {
width: 100%;
height: 100%;
}
此方法也可封装为一个页面生成多个图表
欢迎大家留言指正!文章来源地址https://www.toymoban.com/news/detail-623543.html
到了这里,关于小程序使用echarts的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!