在小程序中使用echarts的格式如下,首先是初始化:
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
...
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});
这个是官网的,将上面的const改成let,将chart提出到最外面范围,不在方法里面,上面就变成
let chart;
function initChart(canvas, width, height) {
chart= echarts.init(canvas, null, {
width: width,
height: height
});
就变动这里,其他都不用变,用过echarts都知道先初始化,然后改数据是通过chart.setOption({}),这里面就是上面要改变的var option={}内容,动态数据就是改它,例子如下
myChart.setOption({
title:{
text:list.year+"年销售",
textStyle:{
fontSize:13,
}
},
xAxis:[
{
name:'月份',
type:'category',
boundaryGap: false,
data:list.months
}
]
,
yAxis:[{
name:'万',
type:'value',
}],
series:[
{
name:'销售目标',
type:'line',
stack:'总量',
data:list.planSale,
},
{
name:'销售额度',
type:'line',
stack:'总量',
data:list.soldMonths,
}
]
})
})
就是那么简单动态可以是根据事件,或者是定时器等来决定,网上一堆。。乱七八糟的东西,要不是之前学习过echarts真被带偏,echarts重点:
第一 是固定容器
第二 echarts初始化,实例化,相关配置,忘记的看官网
echarts.init(canvas, null, {
width: width,
height: height
});
第三 就是从实例化的echarts,就是对象改配置