在使用之前 ,还是请详细阅读官网文档
官方文档还是讲的比较详细，在json、wxml中引入,基本上就完成了前期配置，下面就是在js中，如何创建自定义设置并动态渲染echart图表了
在js中 引入
import * as echarts from ‘../../ec-canvas/echarts‘;设定
设定4个全局变量（根据使用情况自行定义，我这就随便定义了）
let chart; let time = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, , 23, 24, 25, 26, 27, 28, 29, 30]; let views = []; let buyNum = [];
接下来就是创建图表数据方法（我这是使用折线图）注 ：我的是放在page外面的，也可根据自己喜好
function onInit(canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
chart.showLoading();//这里是缓冲动画
var option = {
tooltip: {
trigger: ‘none‘//这里是图表中点击指示点后的提示框，现在我已禁止，开启为axis字段
},
color: [‘#00A1D6‘, ‘#F5C500‘],//这是自定义副标颜色
legend: {
left:"left",//这是副标位置，更多查看官网
data: [‘浏览量‘, ‘购买量‘]//这是副标
},
grid: {
left: ‘3%‘,
right: ‘4%‘,
bottom: ‘3%‘,
containLabel: true//这里设置图表距容器距离，也可设定为具体值，boolean状态为当数据过多时是否溢出容器
},
xAxis: {
type: ‘category‘,
boundaryGap: false,
axisLabel: {
interval: 2,//设定刻度距离，距离2显示一个刻度
textStyle: {
fontsize: ‘10rpx‘，设置字体大小，颜色等
}
},
data: time
},//这里为x坐标
yAxis: {
min: 0,//y坐标最小值
max: 500,//y坐标最大值，也可不设值，它会根据数值大小自行判定
type: "value"
},//这里为y坐标
series: [{
name: ‘浏览量‘,//这里为副标所对应的折线
type: ‘line‘,
stack: ‘总量‘,
symbol:‘none‘,//是否取消指示点
smooth:true,//是否平滑显示
data: views,//这为动态赋值，下面为附上怎么传
itemStyle: {//这是自定义样式，想更多样式参考官网API
normal: {
lineStyle: {
color: ‘#00A1D6‘//这里为自定义折线颜色
}
}
},
},
{
name: ‘购买量‘,
type: ‘line‘,
stack: ‘总量‘,
data: buyNum,
itemStyle: {
normal: {
lineStyle: {
color: ‘#F5C500‘
}
}
},
}
]
};
chart.setOption(option);
chart.hideLoading();//这是消除加载动画
return chart;
}
好了 现在我们基本上配置好了
现在就在page中引入了
data: {
ecLine: {
onInit: onInit
},
}
下面是动态渲染数据(放在请求下面，根据实际情况)
agencyIndex().then(res => {
1.取出自己需要的数据
2.赋值给全局变量 time、views 、buyNum
3.动态赋值（我这直接粘贴了，也可直接在这设置样式，上面主要作用为初始化图表）
chart.setOption({
series: [{
name: ‘浏览量‘,
type: ‘line‘,
stack: ‘总量‘,
symbol: ‘none‘,
smooth: true,
data: views,
itemStyle: {
normal: {
lineStyle: {
color: ‘#00A1D6‘
}
}
},
},
{
name: ‘购买量‘,
type: ‘line‘,
stack: ‘总量‘,
symbol: ‘none‘,
smooth: true,
data: buyNum,
itemStyle: {
normal: {
lineStyle: {
color: ‘#F5C500‘
}
}
},
}
]
});
})
完结过后，发现一个大大的惊喜，两条数据折线，数据不一样，但是线条却重合了（反正我的是这种情况）
解决办法：在series中stack字段要设为不一样的，比如我的代码
chart.setOption({
series: [{
name: ‘浏览量‘,
type: ‘line‘,
stack: ‘浏览总量‘,
symbol: ‘none‘,
smooth: true,
data: views,
itemStyle: {
normal: {
lineStyle: {
color: ‘#00A1D6‘
}
}
},
},
{
name: ‘购买量‘,
type: ‘line‘,
stack: ‘购买总量‘,
symbol: ‘none‘,
smooth: true,
data: buyNum,
itemStyle: {
normal: {
lineStyle: {
color: ‘#F5C500‘
}
}
},
}
]
});
这样解决啦！