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
}
效果圖:
