echarts柱状图圆角实现

效果图:
在这里插入图片描述
源码:

option = {
      tooltip: {
           trigger: 'axis'
      },
      toolbox: {
           feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
       },
       legend: {
             x: 'center',
             y: '',
             data:['预计成绩','实际成绩']
        },
        xAxis: [
            {
                 type: 'category',
                 data: ['田径','游泳','举重','网球','羽毛球','乒乓球','跆拳道']                               
            }
        ],
        yAxis: [
             {
                   type: 'value',
                   name: '(奖牌数)',
              }
        ],
        series: [
              {
                   name:'预计成绩',
                   type:'bar',
                   data:[2,5,6,7,5,2,8],
                   itemStyle: {
                        //柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多
                         normal: {
                              //柱形图圆角,初始化效果
                               barBorderRadius:[15, 15, 0, 0]
                         }
                    },
                    barGap:'0%'
           },
           {
                name:'实际成绩',
                type:'bar',
                data:[5,4,10,4,5,6,4],
                itemStyle: {
                      //柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多
                      normal: {
                            //柱形图圆角,初始化效果
                            barBorderRadius:[20,20, 0, 0]
                      }
                },
                barGap:'0%'
            }
      ],
      color:['#0078d7','#f49902']
 };

效果图:
在这里插入图片描述
源码:

option = {
     title: {
           text: '2017年度市级运动员统计汇总',
           subtext: '',
           x: 'center'
      },
      tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
            orient: 'horizontal',
            // x: 'center',
            y: '20px',
            data: ['普通运动员', '重点人数', '输送人数', '退役人数']
      },
      toolbox: {
            show: true     
       },
      calculable: true,
      series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['25%','55%'],
            center: ['50%', '50%'],
            data: [
                 { value: 100, name: '普通运动员' },
                 { value: 200, name: '重点人数' },
                 { value: 400, name: '输送人数' },
                 { value: 800, name: '退役人数' },
            ]
        }],
        color:['#f05a4b','#f49902','#1dab91','#0078d7']
 };
  • 10
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值