加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

echarts 柱状图 ,颜色和显示设置

(2017-03-22 14:42:04)
分类: Echarts
http://common.cnblogs.com/images/copycode.gif柱状图 ,颜色和显示设置" />

  xAxis : [
            {
                type : 'category',
//                 name:'额度',
        //这是设置的false,就不不显示下方的x轴,默认是true的
show: false,
        //这里呢,就是每个柱的name了,根据实际情况下就好了,我就先写这三个 data : [
'最多','平均','最少'], axisLabel: {
             //这个是倾斜角度,也是考虑到文字过多的时候,方式覆盖采用倾斜
// rotate: 30,
            //这里是考虑到x轴文件过多的时候设置的,如果文字太多,默认是间隔显示,设置为0,标示全部显示,当然,如果x轴都不显示,那也就没有意义了
interval :0 } } ], yAxis : [ { type : 'value', name:'数量',
          //下面的就很简单了,最小是多少,最大是多少,默认一次增加多少 min:
0, max: 30, interval: 6,
          //下面是显示格式化,一般来说还是用的上的 axisLabel: { formatter:
'{value} 包' } } ], series : [ { name: '数量', type: 'bar', itemStyle: { normal: {
              //好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了, color: function(
params) { // build a color map as your need. var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0' ]; return colorList[params.dataIndex] },
              //以下为是否显示,显示位置和显示格式的设置了 label: { show:
true, position: 'top', // formatter: '{c}' formatter: '{b}\n{c}' } } },
          //设置柱的宽度,要是数据太少,柱子太宽不美观~
          barWidth:70, data: [
28,15,9,4,7,8,23,11,17] } ]
http://common.cnblogs.com/images/copycode.gif柱状图 ,颜色和显示设置" />

http://images2015.cnblogs.com/blog/897245/201610/897245-20161015144454031-2016256458.png柱状图 ,颜色和显示设置" />

效果就是这样啦

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有