echarts柱状图

2018/07/24 08:53
阅读数 5

Charts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。

下面继续介绍柱状图示例。

方法/步骤

 
  1. 1

    堆积条形图,任意系列多维度堆积,代码如下:

    option = {

        tooltip : {

            trigger: 'axis',

            axisPointer : {            // 坐标轴指示器,坐标轴触发有效

                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'

            }

        },

        legend: {

            data:['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']

        },

        toolbox: {

            show : true,

            feature : {

                mark : {show: true},

                dataView : {show: true, readOnly: false},

                magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},

                restore : {show: true},

                saveAsImage : {show: true}

            }

        },

        calculable : true,

        xAxis : [

            {

                type : 'value'

            }

        ],

        yAxis : [

            {

                type : 'category',

                data : ['周一','周二','周三','周四','周五','周六','周日']

            }

        ],

        series : [

            {

                name:'直接访问',

                type:'bar',

                stack: '总量',

                itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

                data:[320, 302, 301, 334, 390, 330, 320]

            },

            {

                name:'邮件营销',

                type:'bar',

                stack: '总量',

                itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

                data:[120, 132, 101, 134, 90, 230, 210]

            },

            {

                name:'联盟广告',

                type:'bar',

                stack: '总量',

                itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

                data:[220, 182, 191, 234, 290, 330, 310]

            },

            {

                name:'视频广告',

                type:'bar',

                stack: '总量',

                itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

                data:[150, 212, 201, 154, 190, 330, 410]

            },

            {

                name:'搜索引擎',

                type:'bar',

                stack: '总量',

                itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},

                data:[820, 832, 901, 934, 1290, 1330, 1320]

            }

        ]

    };

                        

    百度echarts柱状图(二)
  2. 2

    标准条形图,横纵坐标轴互换,代码如下:

    option = {

        title : {

            text: '世界人口总量',

            subtext: '数据来自网络'

        },

        tooltip : {

            trigger: 'axis'

        },

        legend: {

            data:['2011年', '2012年']

        },

        toolbox: {

            show : true,

            feature : {

                mark : {show: true},

                dataView : {show: true, readOnly: false},

                magicType: {show: true, type: ['line', 'bar']},

                restore : {show: true},

                saveAsImage : {show: true}

            }

        },

        calculable : true,

        xAxis : [

            {

                type : 'value',

                boundaryGap : [0, 0.01]

            }

        ],

        yAxis : [

            {

                type : 'category',

                data : ['巴西','印尼','美国','印度','中国','世界人口(万)']

            }

        ],

        series : [

            {

                name:'2011年',

                type:'bar',

                data:[18203, 23489, 29034, 104970, 131744, 630230]

            },

            {

                name:'2012年',

                type:'bar',

                data:[19325, 23438, 31000, 121594, 134141, 681807]

            }

        ]

    };

    百度echarts柱状图(二)
  3. 3

    多系列层叠,个性化样式,代码如下:

    option = {

        title : {

            text: 'ECharts2 vs ECharts1',

            subtext: 'Chrome下测试数据'

        },

        tooltip : {

            trigger: 'axis'

        },

        legend: {

            data:[

                'ECharts1 - 2k数据','ECharts1 - 2w数据','ECharts1 - 20w数据','',

                'ECharts2 - 2k数据','ECharts2 - 2w数据','ECharts2 - 20w数据'

            ]

        },

        toolbox: {

            show : true,

            feature : {

                mark : {show: true},

                dataView : {show: true, readOnly: false},

                magicType : {show: true, type: ['line', 'bar']},

                restore : {show: true},

                saveAsImage : {show: true}

            }

        },

        calculable : true,

        grid: {y: 70, y2:30, x2:20},

        xAxis : [

            {

                type : 'category',

                data : ['Line','Bar','Scatter','K','Map']

            },

            {

                type : 'category',

                axisLine: {show:false},

                axisTick: {show:false},

                axisLabel: {show:false},

                splitArea: {show:false},

                splitLine: {show:false},

                data : ['Line','Bar','Scatter','K','Map']

            }

        ],

        yAxis : [

            {

                type : 'value',

                axisLabel:{formatter:'{value} ms'}

            }

        ],

        series : [

            {

                name:'ECharts2 - 2k数据',

                type:'bar',

                itemStyle: {normal: {color:'rgba(193,35,43,1)', label:{show:true}}},

                data:[40,155,95,75, 0]

            },

            {

                name:'ECharts2 - 2w数据',

                type:'bar',

                itemStyle: {normal: {color:'rgba(181,195,52,1)', label:{show:true,textStyle:{color:'#27727B'}}}},

                data:[100,200,105,100,156]

            },

            {

                name:'ECharts2 - 20w数据',

                type:'bar',

                itemStyle: {normal: {color:'rgba(252,206,16,1)', label:{show:true,textStyle:{color:'#E87C25'}}}},

                data:[906,911,908,778,0]

            },

            {

                name:'ECharts1 - 2k数据',

                type:'bar',

                xAxisIndex:1,

                itemStyle: {normal: {color:'rgba(193,35,43,0.5)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'\n'):'';}}}},

                data:[96,224,164,124,0]

            },

            {

                name:'ECharts1 - 2w数据',

                type:'bar',

                xAxisIndex:1,

                itemStyle: {normal: {color:'rgba(181,195,52,0.5)', label:{show:true}}},

                data:[491,2035,389,955,347]

            },

            {

                name:'ECharts1 - 20w数据',

                type:'bar',

                xAxisIndex:1,

                itemStyle: {normal: {color:'rgba(252,206,16,0.5)', label:{show:true,formatter:function(p){return p.value > 0 ? (p.value +'+'):'';}}}},

                data:[3000,3000,2817,3000,0]

            }

        ]

    };

    百度echarts柱状图(二)
  4.  

    标准条形图,横纵坐标轴互换,如下图所示:

    百度echarts柱状图(二)
  5.  

    堆积条形图,任意系列多维度堆积,如下图所示:

    百度echarts柱状图(二)
  6.  

    多维条形图,个性化样式,文本标签显示,透明数据驱动样式,如下图所示:

    百度echarts柱状图(二)
  7.  

    旋风条形图,正负值混合,如下图所示:

    百度echarts柱状图(二)
  8.  

    旋风条形图,正负值混合,交错正负轴标签,如下图所示:

    百度echarts柱状图(二)
  9.  

    不等据柱形图,双数数轴,如下图所示:

    百度echarts柱状图(二)
  10.  

    搭配时间轴,时空维度的数据展现,如下图所示:

    百度echarts柱状图(二)
  11.  

    彩虹柱形图,个性化,如下图所示:

    百度echarts柱状图(二)
  12.  

    多系列彩虹柱形图,如下图所示:

    百度echarts柱状图(二)
  13.  

    柱状图,个性化,柱形宽度,填充、高亮、文本样式等,如下图所示:

    百度echarts柱状图(二)
    END
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部