在博客園年度總結中，有2張柱狀圖，分別是月度新增隨筆趨勢和年度新增隨筆趨勢
本文繼續介紹一下如何在小程序中使用echarts插入圖表
1、下載依賴文件
解壓後將目錄ec-canvas複製一份放到到自己項目中
2、修改json文件配置
如果你想在某個page下添加圖表，找到那個page目錄下的xxx.json文件，添加如下配置
{
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
3、代碼邏輯
圖表展示邏輯如下：
- 後端接口提供月度和年度數據，同時因爲是柱狀圖，所以每組數據又分爲橫軸數據(橫座標)、縱軸數據(縱座標)；
- 微信端echarts能夠接收這種動態數據，所以不能把數據源寫死；
網上很多文章都是寫死數據源的，找了很久才找到一些動態獲取數據的例子
另外我已經在後端把數據處理了一次，使它貼合柱狀圖所需數據格式，傳遞到前端的形式如下
"month_result": [
{
"date": "2022-01",
"value": 7
},
{
"date": "2022-02",
"value": 1
},
... ...
... ...
],
"year_result": [
{
"date": "2017",
"value": 27
},
{
"date": "2018",
"value": 87
},
... ...
... ...
]打開js文件，開始編輯代碼
(1)導入echarts組件
import * as echarts from '../../ec-canvas/echarts'; //引入圖表組件
(2)定義設置圖表樣式函數 (注意：這個函數寫在Page外面)
//設置Echarts Option
function setOption(chart, x_data, y_data, interval) {
var option = {
grid:{ //折線圖在當前容器的位置調整
// x:50, //左側距離左邊的距離
// y:50, //頂部最高點距離頂部的位置
// x2:80, // 右側距離右側的距離
// y2:40, //距離底部距離
borderWidth:1,
height: 120
},
xAxis: {
type: 'category',
data: x_data, //['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
axisLabel:{ // x軸文字傾斜
interval:0,
rotate:45,//傾斜度 -90 至 90 默認爲0
margin:10,
textStyle:{
fontWeight:"bolder",
color:"#000000"
}
}
},
yAxis: {
type: 'value',
interval: interval, // y軸間隔數
},
series: [
{
itemStyle:{
// color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
normal:{
color:'#ee6666' // 調整柱子的顏色
}
},
data: y_data, //[10, 20, 30, 80, 50, 30, 66]
type: 'bar',
showBackground: true,
// backgroundStyle: {
// color: 'rgba(180, 180, 180, 0.2)'
// }
}
]
};
chart.setOption(option);
return chart;
}代碼說明
函數setOption()定義了4個參數
chart：echarts組件用到的參數
x_data: 柱狀圖橫軸數據
y_data: 柱狀圖縱軸數據
interval: 柱狀圖縱軸間距(因爲2個柱狀圖都用這個函數來定義樣式，但是它們的縱軸數值差距較大，需要分開定義間距)
(3)定義渲染圖表函數（注意：這2個函數寫在Page內）
因爲我要渲染2張圖表，所以這裏定義2個函數
ps.開始時只定義了一個函數，然後2張圖都調用它，結果發現只渲染成功一個圖，不知道爲啥
barChartMonth: function (x, y) {
this.echartsComponnet.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
// initChart(chart, x, y);
setOption(chart, x, y)
return chart;
});
},
barChartYear: function (x, y) {
this.echartsComponnet2.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
// initChart(chart, x, y);
setOption(chart, x, y)
return chart;
});
},x和y分別爲柱狀圖橫軸、縱軸數據；
在這個函數中調用了圖表樣式函數setOption()；
另外，this.echartsComponnet和this.echartsComponnet2在後面的onLoad()中會定義
(4)在wxml文件中配置圖表展示位置
打開所在頁面的wxml文件，分別添加月度數據和年度數據的位置代碼
... ...
... ...
<view class="ec_container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
... ...
<view class="ec_container">
<ec-canvas id="mychart-dom-bar2" canvas-id="mychart-bar" ec="{{ ec2 }}"></ec-canvas>
</view>
... ...
... ...其中<ec-canvas>標籤中的id屬性和ec屬性我們定義了2個不同的值
(5)打開js文件，從後端接收數據傳給echarts組件
先在data中配置echarts延遲加載，也就是給wxml中的ec-canvas標籤中的ec屬性賦值
data: {
now_year: utils.get_now_year(), //調用util.js中定義的獲取當前年份函數
blog_users: {},
blog_info: {},
blogs: {},
ec: {
lazyLoad: true // 延遲加載
},
ec2: {
lazyLoad: true // 延遲加載
}
}, 然後在onLoad()中定義request請求，向後端請求數據，將數據傳給渲染函數
onLoad(options) {
this.get_blog_users()
this.get_blog_info()
let that = this
this.echartsComponnet = this.selectComponent('#mychart-dom-bar') //查找頁面的echart組件位置
this.echartsComponnet2 = this.selectComponent("#mychart-dom-bar2")
wx.request({
url: 'https://bingshuang.top:5000/api/blog/get_blogs',
method: 'GET',
data: {
},
success: (res) => {
let month_data = res.data.month_result
let year_data = res.data.year_result
let x_data1 = month_data.map(x => x.date) //使用map方法提取月度數據的日期和對應的value，日期爲橫軸，value值爲縱軸
let y_data1 = month_data.map(x => x.value)
let x_data2 = year_data.map(x => x.date)
let y_data2 = year_data.map(x => x.value)
that.setData({
blogs: res.data,
x : x_data1,
y : y_data1,
m: x_data2,
n: y_data2
})
// console.log(this.data.blogs)
//給圖表加上數據
that.barChartMonth(that.data.x, that.data.y, 2) //渲染月度數據
that.barChartYear(that.data.m, that.data.n, 20) //渲染年度數據
}
})
},先定義了2個參數，獲取頁面的echarts組件this.echartsComponnet和this.echartsComponnet2;
然後用request請求接口，獲取月度數據和年度數據；
再把數據傳給barChartMonth()和barChartYear()即可;
參考文章：