柱状图

初始化ECharts
var myChart = echarts.init(document.getElementById('bar'));

var labelRight = {
    normal: {
        position: 'bottom'
    }
};
option = {
    title: {
        text: '交错正负轴标签',
        subtext: 'From ExcelHome',
        sublink: 'http://e.weibo.com/1341556070/AjwF2AgQm'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    legend: {
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他','其他']
    },
    grid: {
        top: 80,
        bottom: 30
    },
    xAxis: {
        type : 'category',
        //axisLine: {show: false},
        //axisLabel: {show: false},
        axisTick: {show: false},
        //splitLine: {show: false},
        data : ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one'] 
    },
    yAxis: {
        type : 'value',
        position: 'top',
        splitLine: {lineStyle:{type:'dashed'}},//Y轴虚线
    },
    series : [
        {
            name:'生活费',
            type:'bar',
            stack: '总量',
            //图标上的文字
            /*label: {
                normal: {
                    show: true,
                    formatter: '{b}'
                }
            },*/
            data:[-0.7,-0.9,0.2, 0.44,1,-1.1,-4,1,-2,-0.5
                /*{value: -0.07, label: labelRight},
                {value: -0.09, label: labelRight},
                0.2, 0.44,
                {value: -0.23, label: labelRight},
                1,
                {value: -0.17, label: labelRight},
                2,
                {value: -0.36, label: labelRight},
                0.18*/
            ],
            color:['#636363']
        },
        {
            name:'总计',
            type:'bar',
            stack: '总量',
            data:[1,2,0.2, 0.44, 4, 4,3,0.47,2,0.18],
            color:['#f7af15']
        },
    ]
};

柱状图_第1张图片
图示

你可能感兴趣的:(柱状图)