小程序里面動態顯示圖表
wxml
<view class="box">
<ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>
wxss
.box {
width:100%;
height:100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
js
import * as echarts from '../../ec-canvas/echarts';
let chart = null;
var dataList = [];
const app = getApp();
Page({
onShareAppMessage: function(res) {
return {
title: 'ECharts',
path: '/pages/index/index',
success: function() {},
fail: function() {}
}
},
/**
* 頁面的初始數據
*/
data: {
ec: {
lazyLoad: true // 延遲加載
},
},
onReady() {
let that = this
setTimeout(function() {
// 獲取 chart 實例的方式
that.init_echarts()
}, 2000);
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
this.echartsComponnet = this.selectComponent('#mychart');
},
init_echarts(){
// 參考鏈接https://blog.csdn.net/hao_0420/article/details/80931339
this.echartsComponnet.init((canvas, width, height) => {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
// text: '測試下面legend的紅色區域不應被裁剪',
left: 'center'
},
color: ["#AEA7C7", "#C4E0D4"],
legend: {
data: ['千橡5期', '滬深300指數'],
bottom: 10,
// left: 60,
// left: 'center',
textStyle: {
//圖例文字的樣式
color: '#949294',
fontSize: 14
},
z: 100
},
grid: {
containLabel: false,
left:100
},
tooltip: {
show: false,
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// show: false
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
max:10000,
axisLabel: {
show: true,
interval: "auto",
formatter: "{value}%"
},
// show: false
},
series: [{
name: '千橡5期',
type: 'line',
smooth: true,
data: [18, 36, 65, 30, 78, 40, 33]
}, {
name: '滬深300指數',
type: 'line',
smooth: true,
data: [12, 50, 51, 35, 70, 30, 20]
}]
};
chart.setOption(option);
return chart;
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function(options) {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function() {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function() {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function() {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function() {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function() {
}
})
max:10000 y軸最大數值
參考鏈接 https://www.echartsjs.com/zh/builder.html