zoukankan      html  css  js  c++  java
  • 解决echarts饼图显示百分比,和显示内容字体及大小

        // 基于准备好的dom,初始化echarts实例
            var pieEchart = echarts.init(document.getElementById('pieEchart'));
    
             // 指定图表的配置项和数据
             var pieoption = {  
                title : {  
                    text: '公里总里程',   
                    x:'left',
                    textStyle:{
                        color:'#FFFFFF',
                        fontSize:25
                    }
                },  
                tooltip : {  
                    trigger: 'item',  
                    formatter: "{a} <br/>{b} : {c} KM"  
                },  
                legend: {  
                    orient : 'vertical',  
                    x : 'left',  
                    top:40,
                    itemWidth:70,
                    itemHeight:30,
                    formatter: '{name}',
                    textStyle:{
                        color: '#FFFFFF'
                    },
                    data:[{name:'高速50KM',icon:'rect'},{name:'一级150KM',icon:'rect'},{name:'二级150KM',icon:'rect'},{name:'三级100KM',icon:'rect'},{name:'四级50KM',icon:'rect'}]  }
                ,   
                calculable : true,  
                series : [  
                    {  
                        name:'公里总里程',  
                        type:'pie',  
                        radius : '70%',//饼图的半径大小  
                        center: ['60%', '60%'],//饼图的位置 
                        label:{            //饼图图形上的文本标签
                                normal:{
                                    show:true,
                                    position:'inner', //标签的位置
                                    textStyle : {
                                        fontWeight : 300 ,
                                        fontSize : 16    //文字的字体大小
                                    },
                                    formatter:'{d}%'
    
                                    
                                }
                            },
                        data:[  
                            {value:50,name:'高速50KM',itemStyle:{normal:{color:'#FE0000'}}},  
                            {value:150,name:'一级150KM',itemStyle:{normal:{color:'#F29700'}}},  
                            {value:150,name:'二级150KM',itemStyle:{normal:{color:'#02B0ED'}}}, 
                            {value:100,name:'三级100KM',itemStyle:{normal:{color:'#55E87D'}}},
                            {value:50,name:'四级50KM',itemStyle:{normal:{color:'#FFE200'}}},
                        ]
                    }  
                ]  
            };
    
                // 使用刚指定的配置项和数据显示图表。
                pieEchart.setOption(pieoption);
    <div id="pieEchart" style=" 480px;height:300px;">

  • 相关阅读:
    Hibernate映射Map属性2
    Ajax向Controller发送请求并接受数据需要注意的一个细节
    设置 jsp 表格相邻两行的颜色不一样
    Hibernate映射Map属性
    自己写的爬虫
    在一个jsp页面中引用另一个jsp文件的路径的问题
    state设计原则
    项目图标库怎样选择
    一些有用的插件
    Hook
  • 原文地址:https://www.cnblogs.com/congyu/p/8028290.html
Copyright © 2011-2022 走看看