項目涉及圖表部分的技術(shù)選型
對于圖表這塊的開發(fā)，使用一些流行的圖表庫可以大大提高我們的開發(fā)效率，目前較為流行的圖表庫大概有Echarts,Hcharts,AntV,他們都是大同小異，我印象比較深刻的是Hcharts是支持多坐標軸的，Echarts好像是不支持的，但是對于小程序的選擇我們選擇的是阿里的AntV-f2，因為他明確指出了適合小程序開發(fā)，而且AntV-f2除了不支持一些document，其他的大部分功能都是支持的，我們就沒有再考慮其他的庫，但是官方并沒有太多關(guān)于小程序的具體使用文檔，我們只能根據(jù)js的相關(guān)事例翻譯成小程序的語法。
前期準備
釘釘小程序開發(fā)工具：https://open-doc.dingtalk.com/microapp/kn6zg7/zunrdk#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7
AntV - F2： https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html
AntV - F2的集成
安裝f2
npm install @antv/f2 --save
安裝my-f2 ,至于為什么要再包裝一層my-f2，可以看下這篇文檔 ： 聊一聊 F2 與小程序
npm install @antv/my-f2
開發(fā)前需要了解一些圖表的api，比如tooltip、guide、legend、coord 等。具體可參考api文檔。
完成以上步驟后我們先來集成一個折線圖吧
1.通過canvas創(chuàng)建一個圖表
<canvas
id="am-mc-line-{{$id}}"
height="{{height}}"
width="{{width}}"
onTouchStart="touchStart"
onTouchMove="touchMove"
onTouchEnd="touchEnd"
/>
this.chart = new F2.Chart({
el: canvas,
width,
height,
padding,
appendPadding,
});
2.渲染圖表的source、tooltip、legend、axis等屬性
this.chart.tooltip(tooltip); /// 可參考tooltip的Api設(shè)置對應的屬性
this.chart.legend(legend); /// 可參考legend的Api設(shè)置對應的屬性
this.chart.source(data);
/// 折線圖的繪制
this.chart.line().position('key*value').color('#999')
效果預覽
效果看著有點丑對不對......那我們就來實現(xiàn)一下設(shè)計師的效果圖吧！具體功能：1.默認展示一個tooltip, 2.tooltip改變時展示對應x軸的數(shù)據(jù)，3.自定義tooltip
默認展示一個tooltip
我們自定義一個默認的tooltip:, 就叫做def_item吧，當圖表渲染完成設(shè)置def_item = {key: 100, value: 200},這里有個注意點，就是def_item的內(nèi)容不是隨便定義的，這里我們先不做多說，后面會說明這個def_item的key值時如何設(shè)置的。
/// 設(shè)置默認的tooltip
chart.tooltip(tooltip);
if (tooltip) {
setTimeout(() => {
if (tooltip.def_item) {
var item = tooltip.def_item; // 要展示 tooltip 的數(shù)據(jù)
var point = chart.getPosition(item); // 獲取該數(shù)據(jù)的畫布坐標
chart.showTooltip(point);
}
}, 500)
}
/// 網(wǎng)絡請求成功，設(shè)置def_item
this.setData({
tooltip: {
showTitle: true,
showCrosshairs: true,
def_item: {key: '2017-06-07', value: 135}
},
})
通過監(jiān)聽tooltip的改變，設(shè)置我們需要的指定x軸的數(shù)據(jù)，同時可以自定義tooltip
通過查找tooltip的Api我們會發(fā)現(xiàn)它有3個事件的回調(diào)，在釘釘小程序中我們只能通過props來傳遞tooltip的回調(diào)
onShow(obj) {
// obj: { x, y, title, items }
}, // tooltip 顯示時的回調(diào)函數(shù)
onHide(obj) {
// obj: { x, y, title, items }
}, // tooltip 隱藏時的回調(diào)函數(shù)
onChange(obj) {
// obj: { x, y, title, items }
},
/// 引入到小從程序中
chart.tooltip({
showCrosshairs: tooltip.showCrosshairs,
showTitle: tooltip.showTitle,
showItemMarker: tooltip.showItemMarker,
background: tooltip.background,
crosshairsStyle: tooltip.crosshairsStyle,
tooltipMarkerStyle: tooltip.tooltipMarkerStyle,
onChange(ev) {
console.log(ev, 8888)
// 通過這個打印我們可以看到具體的信息，這個信息和上面我們說的def_item的設(shè)置是有關(guān)聯(lián)的，
// 我們展開這個ev的信息，可以看到item[0]下的信息: origin:{key: "2017-06-15", value: 245, type: "legend1"}
// 這個origin中的key和value就是和def_item中的一一對應的。如果不是，那就無法定位默認值。
// 同時，這個origin中的key和value是源自于我們最初初始化折線圖設(shè)置的key和value， this.chart.line().position('key*value').color('#999')
if (props.onTooltipChange) {
props.onTooltipChange(ev)
}
}
});
優(yōu)化后的效果
上面記錄了折線圖的一些自定義效果，其他圖表的擴展也跟折線圖差不多，大家花時間研究就好。下面我們再參考F2的js示例封裝一個小程序的組合圖表。效果如下：
1.自定義legend,自定義的legend在小程序端，無法實現(xiàn)點擊效果。
const legendItems = [{
name: '個人分數(shù)',
marker: 'square',
fill: '#7B74FD',
checked: true
}, {
name: '平均分數(shù)',
marker: function marker(x, y, r, ctx) {
ctx.lineWidth = 1;
ctx.strokeStyle = ctx.fillStyle;
ctx.moveTo(x - r - 3, y);
ctx.lineTo(x + r + 3, y);
ctx.stroke();
ctx.arc(x, y, r, 0, Math.PI * 2, false);
ctx.fill();
},
fill: '#FE75B0',
checked: true
}]
chart.legend({
custom: true,
items: legendItems
});
2.圖表的繪制,圖表的具體配置和前面基本一致。
chart.interval().position('name*score').color('#7B74FD').adjust(adjust);
chart.line().position('name*avgScore').color('#FE75B0').adjust(adjust);
