微信小程序引入echart圖表
ECharts 和微信小程序官方團(tuán)隊(duì)合作甫男，提供了 ECharts 的微信小程序版本，ECharts圖表技術(shù)在國(guó)內(nèi)應(yīng)該是最好的了疚俱，能結(jié)合到小程序應(yīng)用真的是極好书在。
準(zhǔn)備：小程序開(kāi)發(fā)環(huán)境，下載ECharts組件腮恩，gitHub地址：ecomfe/echarts-for-weixin
要求小程序基礎(chǔ)庫(kù)：1.9.91（基本不用考慮版本兼容問(wèn)題）
操作過(guò)程：把
ec-canvas拷貝到項(xiàng)目根目錄梢杭。
對(duì)應(yīng)頁(yè)面json文件引入組件：
{
"navigationBarTitleText": "客戶報(bào)表",
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
對(duì)應(yīng)頁(yè)面js文件:
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
var list = []
var list1 = []
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['客戶']
},
grid: {
left: '1%',
right: '30rpx',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: list,
name: '月份',
nameGap: 2,
axisLabel: {
interval: 0
}
},
yAxis: {
type: 'value',
name:'數(shù)量'
},
series: [
{
name: '客戶',
type: 'line',
stack: '總量',
data: list1
}
]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
})
對(duì)應(yīng)頁(yè)面wxml文件:
<view class="recommend_hot_box">
<ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}">
</ec-canvas>
</view>
至此，ECharts圖表設(shè)置成功秸滴，option對(duì)象信息可以根據(jù)ECharts提供的文檔進(jìn)行設(shè)置武契，非常多。
文檔一層層對(duì)應(yīng)，很清晰咒唆，需要設(shè)置什么就找相應(yīng)的設(shè)置即可届垫，option的設(shè)置和網(wǎng)頁(yè)都是一致的。
在開(kāi)發(fā)的過(guò)程中全释，我需要線型圖表可以在小程序左右滑動(dòng)装处，一屏裝不下，demo提供了不阻塞滑動(dòng)浸船，但只有開(kāi)發(fā)工具上可以滑動(dòng)妄迁，放到真機(jī)就不能滑動(dòng)了，這個(gè)有點(diǎn)尷尬李命。有哪位大神解決這個(gè)圖表真機(jī)上可以滑動(dòng)的告知一下(抱拳)
ECharts小程序示例
復(fù)制鏈接加入群聊【開(kāi)發(fā)交流】：https://jq.qq.com/?_wv=1027&k=5rHG16G
