需求
制作叠加的拆线图,柱状图,双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,
});
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。