需求
制造叠加的拆线图,柱状图,双Y轴
东西
echarts
代码
var xAxisData = [];
var data1 = [];
var data2 = [];
var data3 = [];
for (var i = 0; i < 50; i++) {
xAxisData.push('交易日' + i);
data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
data3.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 15);
}
option = {
title: {
text: '柱状图动画耽误'
},
legend: {
data: ['成交价', '昨收价','成交额'],
align: 'left'
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
silent: false,
splitLine: {
show: false
}
},
yAxis: [{
name: '成交价(元)',
type: 'value'
},
{
name: '成交额(万元)',
nameLocation: 'end',
//max: 2000,
type: 'value',
//inverse:false
}],
series: [{
name: '成交价',
type: 'line',
data: data1,
animationDelayUpdate: function (idx) {
return idx * 15;
}
}, {
name: '昨收价',
type: 'line',
data: data2,
animationDelayUpdate: function (idx) {
return idx * 15;
}
},{
name:'成交额',
yAxisIndex:1,
data: data3,
type: 'bar',
smooth: true,
animationDelayUpdate: function (idx) {
return idx * 15;
}
}],
animationEasing: 'elasticOut'
};
效果图
症结申明
1.series中能够叠加多组数据,要指定type
2.yAxis中的第二个Y轴中的nameLocation示意name的位置,end示意在最大值处,默许在0值一端;inverse示意数值序列是不是颠倒。
3.对应第二个Y轴的series要增加属性yAxisIndex,不然没法关联第二个Y轴
微信小顺序适配
微信小顺序中的提醒tooltip和东西栏toolbox是无效的。能够经由过程增加事宜来完成提醒。
chart.on('click',(params)=>{
wx.showModel({
content: 'clicked index:' + params.dataIndex,
});
});