zoukankan      html  css  js  c++  java
  • echarts环形图,自定义说明文字

    一、代码

      1 app.title = '已安装通讯盒电站统计';
      2 
      3 option = {
      4      backgroundColor: '#0f0f31',//#0f0f31
      5     title: {
      6         show:true,
      7         x:"left",
      8         text: '已安装通讯盒电站统计',
      9         textStyle:{
     10             fontSize:16
     11             ,fontWeight:'normal'
     12             ,color:'#72a1d2'
     13         },
     14         left:20,
     15         top:10,
     16         borderColor :'#10395c',
     17         borderWidth :2,
     18     },
     19     tooltip: {
     20         trigger: 'item',
     21         formatter: "{a} <br/>{b}: {c} ({d}%)"
     22     },
     23 
     24     graphic: [ {
     25         type: 'group',
     26         id: 'textGroup2',
     27         left: 370,
     28         top: 400,
     29         position :[10, 0],
     30         children: [
     31            
     32             {
     33                 type: 'text',
     34                 z: 100,
     35                 top: 'middle',
     36                 left: 100,
     37                 style: {
     38                     formatter: "{a} <br/>{b}: {c} ({d}%)",
     39                     text: [
     40                         '已安装1280个',
     41                         '未安装320个',
     42                     ].join('
    '),
     43                     font: '16px cursive',
     44                     textVerticalAlign :'middle',
     45                     fill:'#13a7d1',
     46                     
     47                     
     48                 }
     49             }
     50         ]
     51     }],
     52     series: [
     53         {
     54             name:'已安装通讯盒电站统计',
     55             type:'pie',
     56             radius:['10%','18%'],
     57             avoidLabelOverlap:false,
     58             color:['#32A8FF',' #02C800','#9f47fd'],
     59             formatter: '{b}: {d}',
     60             slient:true,
     61             markLine :{
     62                 label  :{
     63                     show:true,
     64                     position :'outside'  
     65                 },  
     66             },
     67             labelLine:{
     68                 normal:{  
     69                     show:true,
     70                     length:14  ,
     71                     length2 :56,
     72                 }  
     73             },
     74             label:{
     75               normal:{
     76                   show:true,
     77                   position:'center',
     78                   formatter:function(){
     79                       return '80%'
     80                   },
     81                   textStyle:{
     82                       fontSize:20,
     83                       color:'rgba(20, 180, 213, 0.9)',
     84                   }
     85               }  
     86             },
     87             emphasis:{
     88               show:true,
     89               textStyle:{
     90                   fontSize:30,
     91                   //fontWeight:'bold'
     92               }
     93             },
     94             
     95             data:[{value:1280,name:'已安装',itemStyle:{
     96                 normal:{
     97                     color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{ 
     98                         //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
     99 
    100                         offset: 0,
    101                         color: '#2a8af6'
    102                     }, {
    103                         offset: 1,
    104                         color: '#393eda'
    105                     }])
    106                 },emphasis : {
    107                     label : {
    108                         show : true,
    109                         formatter : "{b}
    {d}%",
    110                         color:'white',
    111                     }
    112                 }
    113             }},{value:320,name:'未安装',itemStyle:{
    114                 normal:{
    115                     color:'transparent',
    116                 }
    117             }}]
    118         },{
    119             name:'',
    120             type:'pie',
    121             radius:['8%','10%'],
    122             avoidLabelOverlap:false,
    123             legendHoverLink :false,
    124             label:{
    125               show:false,  
    126             },
    127             tooltip:{//禁止鼠标悬停显示提示框
    128                 show:false,
    129             },
    130             hoverAnimation:false ,//禁止鼠标悬停放大区域
    131             color:['#bcdbfa'],
    132              
    133             data:[{value:100}]
    134         }
    135     ]
    136 };

    二、效果图

  • 相关阅读:
    English trip V1
    English trip V1
    第一类斯特林数
    bzoj 3601 一个人的数论
    bzoj 4407 于神之怒加强版
    bzoj 2693 jzptab
    bzoj 4184 shallot
    luogu P3920 [WC2014]紫荆花之恋
    bzoj 4269 再见Xor
    luogu P2183 [国家集训队]礼物
  • 原文地址:https://www.cnblogs.com/mycnblogs-guoguo/p/10101970.html
Copyright © 2011-2022 走看看