分享一个有成交量和成交额的ECharts配置

DATE: 2016-04-12 / VIEWS: 1476

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'}
              }
        }
    ]
};