ECharts柱状图使用笔记

option = {
    //图名和备注信息
    title: {
        //text: '某地区蒸发量和降水量',
        //subtext: '纯属虚构'
    },
    //图例
    legend: {
        data: ['apple', 'Milk', 'Cheese', 'Tea', 'Coco']
    },
    //指示显示相应的数据和标识,一般里面为空就行
    tooltip: {},
    //右上角的工具栏（可选）
    toolbox: {
        show: true,
        feature: {
            //切换为数据视图
            dataView: {show: true, readOnly: false},
            //切换折线图和柱状图
            magicType: {show: true, type: ['line', 'bar']},
            //将视图还原
            restore: {show: true},
            //下载视图的图片
            saveAsImage: {show: true}
        }
    },
    //数据集
    dataset: {
        source: [
            ['year', '2015', '2016', '2017', '2018'],
            ['apple', 41.1, 30.4, 65.1, 53.3],
            ['Milk', 86.5, 92.1, 85.7, 83.1],
            ['Cheese', 24.1, 67.2, 79.5, 86.4],
            ['Tea', 42.5, 65, 54.7, 23.1],
            ['Coco', 22.1, 41.2, 19.5, 46.4]
        ]
    },
    xAxis: [
        {name:'year',type: 'category', gridIndex: 0},
        //{name:'category',type: 'category', gridIndex: 1}
    ],
    yAxis: [
        {name:'amount',gridIndex: 0},
        //{name:'amount',gridIndex: 1}
    ],
    //调整间距
    grid: [
        {bottom: '5%'},
        //{top: '55%'}
    ],
    series: [// 一组数据视图
        {
            type: 'bar', 
            // color: ['#dd6b66'],
            seriesLayoutBy: 'row'
            //下面是最大最小平均值的样式(可选)
            // markPoint: {
            //     data: [
            //         {type: 'max', name: '最大值'},
            //         {type: 'min', name: '最小值'}
            //     ]
            // },
            // markLine: {
            //     data: [
            //         {type: 'average', name: '平均值'}
            //     ]
            // }
        },{
            type: 'bar', 
            seriesLayoutBy: 'row'
            // markPoint: {
            //     data: [
            //         {type: 'max', name: '最大值'},
            //         {type: 'min', name: '最小值'}
            //     ]
            // },
            // markLine: {
            //     data: [
            //         {type: 'average', name: '平均值'}
            //     ]
            // }
        },{
            type: 'bar', 
            seriesLayoutBy: 'row'
            // markPoint: {
            //     data: [
            //         {type: 'max', name: '最大值'},
            //         {type: 'min', name: '最小值'}
            //     ]
            // },
            // markLine: {
            //     data: [
            //         {type: 'average', name: '平均值'}
            //     ]
            // }
        },{
            type: 'bar', 
            seriesLayoutBy: 'row'
            // markPoint: {
            //     data: [
            //         {type: 'max', name: '最大值'},
            //         {type: 'min', name: '最小值'}
            //     ]
            // },
            // markLine: {
            //     data: [
            //         {type: 'average', name: '平均值'}
            //     ]
            // }
        },{
            type: 'bar', 
            seriesLayoutBy: 'row'
            // markPoint: {
            //     data: [
            //         {type: 'max', name: '最大值'},
            //         {type: 'min', name: '最小值'}
            //     ]
            // },
            // markLine: {
            //     data: [
            //         {type: 'average', name: '平均值'}
            //     ]
            // }
        }
        // 一组新的数据视图
        //{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        //{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        //{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        //{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
};

预览图