微信小程序使用echarts
Apache Echarts 已经支持微信小程序了。个人觉得 是国内最好用的 图表工具了。
使用方法:
1、下载 echarts 相关文件,传送门: echarts-for-weixin
直接 clone 项目,找到 ec-canvas 文件 ,把这个文件复制到小程序项目中
2、 创建一个 page页面,引入使用
图表案例: link
把 option 直接复制过来就可以了
JS:
import * as echarts from '../../ec-canvas/echarts' // 这个是自己实际的目录
function initChart(canvas, width, height, dpr) { // 这部分是固定的不需要 是通用的
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
// 这是 唯一需要更改的,可根据实际情况api更改图标
// 我这边测试的是一个 普通的折线图,案例网址:
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
JSON:
{
"usingComponents": {
"ec-canvas":"../../ec-canvas/ec-canvas",
"left-head":"../../components/left-head/index"
}
}
WXML:
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
WXSS 非常重要 ,不然显示不出来:
/**index.wxss**/
ec-canvas {
width: 100%;
height: 100%;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.picker-pos{
margin-top: -130rpx;
margin-left: 150rpx;
color: blueviolet
}