微信小程序引入echart圖表
ECharts 和微信小程序官方團隊合作，提供了 ECharts 的微信小程序版本，ECharts圖表技術在國內應該是最好的了，能結合到小程序應用真的是極好。
準備：小程序開發環境，下載ECharts組件，gitHub地址：ecomfe/echarts-for-weixin
要求小程序基礎庫：1.9.91（基本不用考慮版本兼容問題）
操作過程：把
圖1-1-1
ec-canvas拷貝到項目根目錄。
對應頁面json文件引入組件：
{
"navigationBarTitleText": "客戶報表",
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
對應頁面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:'數量'
},
series: [
{
name: '客戶',
type: 'line',
stack: '總量',
data: list1
}
]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
})
對應頁面wxml文件:
<view class="recommend_hot_box">
<ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}">
</ec-canvas>
</view>
至此，ECharts圖表設置成功，option對象信息可以根據ECharts提供的文檔進行設置，非常多。
圖2-1-1
文檔一層層對應，很清晰，需要設置什么就找相應的設置即可，option的設置和網頁都是一致的。
在開發的過程中，我需要線型圖表可以在小程序左右滑動，一屏裝不下，demo提供了不阻塞滑動，但只有開發工具上可以滑動，放到真機就不能滑動了，這個有點尷尬。有哪位大神解決這個圖表真機上可以滑動的告知一下(抱拳)
ECharts小程序示例
圖3-1-1
復制鏈接加入群聊【開發交流】：https://jq.qq.com/?_wv=1027&k=5rHG16G
