分享一个有成交量和成交额的ECharts配置
var timeData = [
'2009/6/10', '2009/6/11', '2009/6/12', '2009/6/13', '2009/6/14', '2009/6/15', '2009/6/16'
];
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params) {
// 数据
var datas = option.series;
// 当前日期
var date = params[0].name;
var dataLen = timeData.length;
// 当前日期索引
for (var i = 0; i < dataLen; i++ ) {
if (timeData[i] == date) {
break;
}
}
// html
var html = date;
for (var index = 0; index < datas.length; index++) {
html += "<br/>" + datas[index].name + ' : ' + datas[index].data[i];
}
return html;
}
},
legend: [{
data:['总交易金额','公司组金额','竞价违约金额'],
x: 'center'
},{
data:['总交易数量','公司组数量','竞价违约数量'],
x: 'center',top:20,
}],
grid: [{
left: 50,
right: 10,
height: 300,
containLabel: true
}, {
left: 67,
right: 10,
top: 348,
height: 200,
containLabel: true
}],
xAxis : [
{
type : 'category',
axisLine: {onZero: true},
data: timeData
},
{
gridIndex: 1,
type : 'category',
axisLine: {onZero: true},
data: timeData,
position: 'top'
}
],
yAxis : [
{
name : '金额',
type : 'value'
},
{
gridIndex: 1,
name : '数量',
type : 'value',
inverse: true
}
],
series : [
{
name:'总交易金额',
type:'bar',
//barWidth : 30,
//stack: '金额',
data:[620, 732, 701, 734, 1090, 1130, 1120],
itemStyle:{
normal:{color:'gray'}
}
},
{
name:'总交易数量',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 2,
//barWidth : 30,
hoverAnimation: false,
//stack: '数量',
data:[12, 6, 7, 5, 3, 12, 9],
itemStyle:{
normal:{color:'gray'}
}
},
{
name:'公司组金额',
type:'bar',
//stack: '金额',
data:[120, 132, 101, 134, 290, 230, 220],
itemStyle:{
normal:{color:'green'}
}
},
{
name:'公司组数量',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 2,
//stack: '数量',
data:[14, 6, 9, 4, 3, 10, 8],
itemStyle:{
normal:{color:'green'}
}
},
{
name:'竞价违约金额',
type:'bar',
//stack: '金额',
data:[60, 72, 71, 74, 190, 130, 110],
itemStyle:{
normal:{color:'orange'}
}
},
{
name:'竞价违约数量',
type:'bar',
xAxisIndex: 1,
yAxisIndex: 1,
symbolSize: 2,
//stack: '数量',
data:[9, 8, 3, 4, 8, 12, 7],itemStyle:{
normal:{color:'orange'}
}
}
]
};