1. 前言
- 最近項目里有個需求:顯示收益折線圖,要求smooth line 那種效果,點擊切換不同數據源
- 技術方案
- 第一:想使用canvas去實現,但是發現canvas繪制曲線需要用到貝塞爾曲線,不知道smooth line 曲度怎么去計算,然后放棄這個方案....
- 第二:想起來ECharts這個牛逼的JS庫,正好看到了ECharts支持小程序了,心里想著:穩了!很穩!!
2. 參考
- ECharts的官方文檔
- ECharts配置的API文檔
3.效果圖
earningsDay.png
earningsWeek.png
4.導入js庫到項目中
- 官方文檔: 在微信小程序中使用 ECharts
- 將repo中的 ec-canvas文件夾拷貝項目中,不需要擔心超過2M,在編譯的時候會將導入的JS庫進行es5編譯
-
我在項目中將文件放在與page同層級的位置
文件路徑.png
5.具體使用
5.1 json文件
- 在需要使用繪制圖標的界面的json文件配置路徑,路徑一定要對,路徑不對不會報錯,只是無法渲染,所以出現空白頁面一定要先看路徑問題
{
"navigationBarTitleText": "我的收益",
"enablePullDownRefresh": false,
"usingComponents": {
"ec-canvas": "../../../ec-canvas/ec-canvas"
}
}
路徑一定要對.png
5.2 wxml文件
- 我的UI層級是在圖標上面放了個swiper組件方便實現數據源的點擊切換
- id & canvas-id這兩個屬性的命名可以自己修改
- 我給整個圖表組件設置了個背景圖,因為我取消了ECharts的分割線,用了自己的圖片來作為區分
<view class="ecContainer" style="background-image:url('https://items-1255492638.cos.ap-guangzhou.myqcloud.com/805faf3070e04cb6992cf7f3fda23c4a.png'); background-size:cover">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-bar" ec="{{ec}}"></ec-canvas>
</view>
5. 3 wxss文件
- 這個樣式真的仁者見仁,智者見智了,作為一個iOS開發,小程序css寫的是很爛,歡迎指正
.ecContainer{
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: "#F8FAFC";
height: 310px;
width:100%;
margin: 0 auto;
}
ec-canvas {
width: 100%;
height: 310px;
background-color: "#F8FAFC"
}
5. 4 js文件
- 導入文件
import *as echarts from "../../../ec-canvas/echarts" //echarts的js庫的路徑
var network = require("../../../utils/network.js") //處理網絡請求
var api = require("../../../utils/api.js") //負責API的js
- 配置echart的配置屬性
- 配置我在文檔中看到是寫在page函數之前,我理解相當于一個全局函數配置
- 也可以使用lazyload , 使用到再加載,通過data中的ec屬性配置加載方式
- 使用到的相關配置只是冰山一角,很多的配置在文檔中都有,很方便查詢
//存放初始數據,因為初始化方法不能給page中data賦值,所以設置了個全局的數組存放數據
var dayArry = [0, 0, 0, 0, 0,0,0];
var chart;
function initChart(canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
//請求相關數據
network.requestLoading(api.totalEarnings, "", "GET", '', function (res) {
dayArry = res.data.info.dayData
var option = {
// 為圖表設置標題,項目中不需要,隱藏
// title: {
// text: 'ECharts Demo'
// },
// 一般是在柱圖和餅圖中使用,
// legend: {
// data: ['收益']
// },
// 小程序的tooltip并沒有顯示功能,只有一點縮放動畫
tooltip: {
show: true,
trigger: 'axis', //折線圖trigger需要設置為axis
},
// x軸相關設置
xAxis: {
splitLine: { show: false },//去除網格線
splitArea: { show: false },//保留網格區域
data: xAxis,
show: true, //隱藏x軸,
axisLine:{
show:true,//是否顯示軸線
lineStyle:{
color:"#777777",
width:0 //x州的寬度
}
},
axisTick:{
show:false, //x軸的軸線是否顯示
}
},
// y軸相關設置
yAxis: {
splitLine: { show: false },//去除網格線
type: 'value',
splitArea: { show: false },//保留網格區域
show: false//隱藏y軸
},
series: [
{
name: '收益',
type: 'line', //設置為折線圖,也可以設置bar pie 等等類型
smooth: true, //設置為smooth line
data: dayArry, //數據源
symbol: 'circle', //設定為實心點
symbolSize: 10, //設定實心點的大小
//折線拐點標志的樣式
itemStyle: {
normal: {
color: "#FF1F62",
borderColor: "#F8FAFC",
borderWidth: 3,
shadowColor: "#FCDEE8",
shadowOffsetY: 1
}
},
//折線相關屬性設置
lineStyle: {
color: '#FF1F62',
width: 4
},
//設置數據點上方的提示label
label: {
show: true,
position: 'top',
distance: 10,
//label - formatter
formatter: function (params) {
let data = params.value
let dataStr = "收益" + data + "元"
return dataStr
},
backgroundColor: '#FFFFFF',
textStyle: {
color: '#FF1F62',
fontSize: '11'
},
shadowOffsetY: 2,
shadowColor: "#F8ECF3",
borderColor: "#F8ECF3",
borderWidth: 1,
}
},
]
};
//相關設置set方法調用
chart.setOption(option);
}, function () {
})
chart.on('click', (params) => {
});
return chart;
}
-
將echarts設置為data的屬性導入page中
導入方法.png OK!!!初始化設置已經設置完,效果是第一張效果圖,但是點擊數據源切換要怎么操作呢,繼續切換數據源方法
/**
* 切換日期方法
*/
clickData: function (e) {
this.setData({
selectedTitle: e.currentTarget.id
});
//更新echart數據
// chart為我設置的全局屬性,方便拿到這個chart
//可以打印下option,可以看到很多屬性可以設置
var option = chart.getOption();
if (e.currentTarget.id == 1) {
//因為是折線圖,所以 option.series[0].data 數據源只有一個
option.series[0].data = this.data.weekData
} else if (e.currentTarget.id == 2) {
option.series[0].data = this.data.monthData
} else if (e.currentTarget.id == 3) {
option.series[0].data = this.data.yearData
} else if (e.currentTarget.id == 0) {
option.series[0].data = this.data.dayData
}
//chart更新option設置,即可實現更新數據源,也可以做很多操作,切換顏色等等
chart.setOption(option);
},
6.END
- ECharts的可配置性很強,項目中只使用到了很簡單的一部分,切換也只是切換了數據源
- ECharts論壇中有很多大牛做的圖標demo,有興趣可以去學習
- 項目中有什么問題,請指正,謝謝!!!
