专栏首页前端之攻略饼图legend显示百分比 原

饼图legend显示百分比 原

有时候我们需要在饼图的legend上显示百分比 

      var option6 = {
          color: ['#00a65a', '#00c0ef', '#f39c12', '#f56954', '#0d84df', '#ca04d6', '#e2ce27', '#a3d252', '#13cabf', '#42c78a'],
          title: {
              text: '今年各行业用气占比',
              x: '270',
              y: 'top',
              textStyle: {
                  fontSize: 16,
              }
          },
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },

          legend: {
              orient: 'vertical',
              x: '0',
              top: '80',
              itemGap: 15,
              formatter: function(name) {
                  var data = option6.series[0].data;
                  var total = 0;
                  var tarValue;
                  for (var i = 0, l = data.length; i < l; i++) {
                      total += data[i].value;
                      if (data[i].name == name) {
                          tarValue = data[i].value;
                      }
                  }
                  var p = (tarValue / total * 100).toFixed(2);
                  return name + ' ' + ' ' + '(' + p + '%)';
              },
              data: ['行业1', '行业2', '行业3', '行业4', '行业5', '行业6', '行业7', '行业8', '行业9', '行业10'],

          },
          series: [{
              name: '今年各行业用气占比',
              type: 'pie',
              center: ['70%', '50%'],
              radius: ['30%', '65%'],
              label: {

              },
              labelLine: {

              },

              data: [
                  { value: 335, name: '行业1', },
                  { value: 310, name: '行业2', },
                  { value: 234, name: '行业3', },
                  { value: 335, name: '行业4', },
                  { value: 310, name: '行业5', },
                  { value: 234, name: '行业6', },
                  { value: 234, name: '行业7', },
                  { value: 335, name: '行业8', },
                  { value: 310, name: '行业9', },
                  { value: 234, name: '行业10', },
              ]
          }]
      };
      var myarea1 = echarts.init(document.getElementById('chart-area1'), pietheme);
      myarea1.setOption(option6);

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5+APP 拍照压缩上传 原

    在拍照成功后会返回图片保存的路径,如上面的p参数,在压缩图片时要用到p,overwrite: true不能省略。

    tianyawhl
  • Echart双数值轴极坐标显示格式化 原

    最近需要做个极坐标图,显示时间与对应的压力数值,并且有多个点,查看echart双数值轴中可以做到多个点,但是外围显示的是角度,我们需要把角度格式化成时间,并且t...

    tianyawhl
  • js 函数作用域与this 的指向实例 原

    函数的定义分为2种,(1)直接定义-window 下,内部定义;(2)对象的方法(或对象原型的方法),下面的函数fn1与fn2 是直接定义的函数, doFun...

    tianyawhl
  • 应用Druid进行数据源、SQL、Web应用、URI、Session等监控的简单实现

    最近由于用户量的增加,项目有点力不从心了,感觉比以前慢了许多,着实给咱程序猿吓了一跳,莫非RP有限? 那当然是不可能的啦!仔细排查了下原因,有一点不可以质疑的就...

    哎_小羊
  • 搭建行政资源管理系统 项目开发环境

    本次的项目开发采用的是Spring MVC + MyBatis开发模式,并且所有的数据验证都将通过拦截器完成。那么在整个项目的整合过程之中,有部分的操作是可以进...

    爱明依
  • SSM项目搭建之druid 原

    1) 可以监控数据库访问性能,Druid内置提供了一个功能强大的StatFilter插件,能够详细统计SQL的执行性能,这对于线上分析数据库访问性能有帮助。 

    尚浩宇
  • 阿里Druid数据连接池在SSM框架中的配置使用

    首先可以参考阿里在GitHub给出的一些说明:

    似水的流年
  • 【源码】基于FPGA的PPPoE协议获取账号密码的攻击实现

    对于PPPOE认证上网的过程如下图所示,分为发现阶段和会话阶段,发现阶段分为PADI,PADO,PADR,PADS。

    网络交换FPGA
  • XML文件解析实践(DOM解析)

    昨天完成了基于DOM的XML文件解析类,今天赶紧实践了一下,不得不说,实践中的坑还是很多的。

    FunTester
  • spring-boot-route(五)整合Swaager2生成接口文档

    目前,大多数公司都采用了前后端分离的开发模式,为了解决前后端人员的沟通问题,后端人员在开发接口的时候会选择使用swagger2来生成对应的接口文档,swagge...

    Java旅途

扫码关注云+社区

领取腾讯云代金券