Echarts模板(二):簇状柱形图

2019-04-28  本文已影响0人  ZhenKuanJiang

本人刚参加完市场调查大赛,在这个过程中为了画图试过很多软件,相比于Tableau的所见即所得,虽然操作简单,但步骤繁琐,最后我选择使用Echarts画图,它不仅操作简单,而且图像美观,只需要一点点代码基础就能实现。接下来,我向大家分享以下我用到的几个图的模板代码,你在使用的时候均可通过以下代码进行修改,由于本人没有学过JS,不对的地方还请大家多多指教

option = {
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}                 // 保存图片
        }
    },
    textStyle: {
        fontSize: 25,                                 // 字体大小
    },
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '改善前', '改善后'],
            ['办卡费用',86.28,86.47],
            ['器材配置布局',78.06,77.93],
            ['服务意识',74.69,76.86],
            ['课程效果',73.62,75.01],
            ['清洁卫生状况', 69.48,73.65]
        ]
    },
    xAxis: {
        type: 'category',
        axisLabel: {
            textStyle: {
                fontSize: 25                // 坐标轴字号大小
            }
        }
    },
    yAxis: {
        axisLabel: {
            textStyle: {
                fontSize: 25
            }
        }
    },
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
        {
            name:'改善前',
            type: 'bar',
            barWidth:55,                // 图像柱宽
            label: {
                normal: {
                    show: true,
                    position: 'top'     // 显示数据的位置
                }
            },
        },
        {
            name:'改善后',
            type: 'bar',
            barWidth:55,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            
        }
    ]
};

以下是效果图

上一篇 下一篇

猜你喜欢

热点阅读