echarts 如何在柱状图显示自己想要展示的数据。

2017-03-03  本文已影响0人  Lyon0616
/*以下是模拟数据*/
var realDatas = [];
var data1 = [12,21];
var data2 = [32,23];
var data3 = [31,13];
var data4 = [41,14];
realDatas.push(data1);
realDatas.push(data2);
realDatas.push(data3);
realDatas.push(data4);
/*以上是模拟数据*/
option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        },
        formatter:function(params){
            console.log(params);
            return realDatas[params[0].dataIndex];
        }
    },
    legend: {
        data: ['实际', '计划']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis:  {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['周一','周二','周三','周四']
    },
    series: [
        {
            value:[2.1,3.2,4.3,5.4],
            name: '实际',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight',
      /*使用formatter*/
                    /*formatter:function(realData){
                        var result=realData[0];
                        return [1,2,3,4];
                    }*/

                }
            },
            data: [55, 44, 63, 60]
        },
        {
            value:[1.2,2.3,3.4,4.5],
            name: '计划',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [45, 56, 37, 40]
        }
    ]
};
上一篇 下一篇

猜你喜欢

热点阅读