微信小程序+echarts
小程序里面动态显示图表
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
