echarts标题字体大小_echarts饼图显示百分比

echarts标题字体大小_echarts饼图显示百分比解决echarts饼图显示百分比,和显示内容字体及大小//基于准备好的dom,初始化echarts实例    varpieEchart=echarts.init(document.getElementById(‘pieEchart’));     //指定图表的配置项和数据     varpieoption={       ti…

大家好,又见面了,我是你们的朋友全栈君。

解决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="width: 480px;height:300px;">

echarts标题字体大小_echarts饼图显示百分比

 

如何给eCharts饼图区域指定颜色

  1. option = {
  2.         title : {
  3.         text: “全局指标状态分布图”,
  4.                x:”left”,
  5.                y:”top”
  6.         },
  7.         tooltip : {
  8.                show: true,
  9.                formatter: “{a} <br/>{b} : {c} ({d}%)”
  10.         },
  11.         color:[“red”, “green”,”yellow”,”blueviolet”]
  12. }

echarts标题字体大小_echarts饼图显示百分比

刷新数据

 <div class="foot_ri" id="txt">
        <div class="foot_txt">
            <span style="color: #6e85bf;font-size: 20px">诉求百分比占比</span>
            <div id="container" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"_echarts_instance_="ec_1550106173775">
                <div style="position: relative; overflow: hidden; width: 1920px; height: 1037px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                    <canvas data-zr-dom-id="zr_0" width="1920" height="1037"
                            style="position: absolute; left: 0px; top: 0px; width: 1920px; height: 1037px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                </div> 
            </div>
        </div>
    </div>

    <img src="../static/images/refresh.png" id="ig" style="margin-top: -370px;margin-left: 935px;">
</div>

 点击 id=”ig” 图片,id=”container” 饼图刷新

 

<#–2019/2/13饼图–>
<script type=”text/javascript”>
    var dom = document.getElementById(“container”);
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {

        // title: {

        //     text: ‘诉求百分比占比’,
        //     subtext: ”,
        //     x: ‘center’
        // },
        tooltip: {

            trigger: ‘item’,
            formatter: “{a} <br/>{b} : {c} ({d}%)”/*鼠标经过显示*/
        },
        // color:[‘#0160ae’, ‘#36a5fc’,’#0d86e7′],
        color: [‘#6f87bf’, ‘#7084a2’, ‘#5e6787’],
        legend: {

            orient: ‘vertical’,
            // bottom: 500,
            left: ‘right’,
            data: [‘咨询’, ‘意见建议’, ‘投诉举报’],
            textStyle: {

                fontWeight: 300,
                fontSize: 16,    //文字的字体大小
                color: ‘#345cc1’//文字的字体颜色
            },
        },
        series: [
            {

                name: ‘访问来源’,
                type: ‘pie’,
                radius: ‘65%’, /*饼图大小*/
                center: [‘40%’, ‘50%’], /*饼图位置*/
                data: [
                    {value: 335, name: ‘咨询’},
                    {value: 234, name: ‘意见建议’},
                    {value: 135, name: ‘投诉举报’}
                ],
                itemStyle: {

                    emphasis: {

                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: ‘rgba(0, 0, 0, 0.5)’
                    }
                }
            }
        ]
    };
    ;
    if (option && typeof option === “object”) {

        myChart.setOption(option, true);
    }
</script>
<#–结束–>
<#–2019/2/15刷新数据–>
<script>
    $(‘#ig’).click(function () {

        var dom = document.getElementById(“container”);
        var myChart = echarts.init(dom);
        myChart.setOption({ //加载数据图表
            series: {

                // 根据名字对应到相应的系列
                name: [‘数量’],
                data: [
                    {value: 222, name: ‘咨询’},
                    {value: 555, name: ‘意见建议’},
                    {value: 56, name: ‘投诉举报’}
                ]
            }

        })
    })
</script>

<#–结束–>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124677.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 在tcp协议的三次握手中(tcp/ip协议三次握手)

    TCP特性1.确认应答(可靠传输的最核心机制)1.确认应答(可靠传输的最核心机制)可靠传输的最核心机制

  • Drupal教程之安装篇

    Drupal教程之安装篇星期一,01/12/2009—似曾相识文章地址:[url]http://www.drupaluser.org/node/3[/url]象许多CMS一样,Drupal也是需要安装,其主要步骤如下(以[url]http://drupaluser.org/[/url]为例):1.在[url]http://drupaluser.org/[/u…

  • centos7安装图形界面

    centos7安装图形界面Centos7安装图形界面第一步:确认yum可用1.1判断yum是否可用,输入yumlist如果出现以下信息,则代表不可用。1.2更改配置vi/etc/sysconfig/network-scripts/ifcfg-ens33进入到是这样的更改最后一行的数据1.3重启网络…

  • 5G科普——5G切片[通俗易懂]

    5G科普——5G切片[通俗易懂]切的是什么?先了解为什么会提出网络切片这一概念。5G服务是多样化的,包括车联网、大规模的互联网、工业自动化、远程医疗、VR/AR等这些服务对我们的要求是不一样的,有的低延时、高可靠;有的高清、高速率;有的大连接、低移动性;因此5G网络要满足差异化的业务,需要能够像搭积木一样灵活部署,方便新业务的上线下线,于是网络切片这一概念应运而生。3GPP定义:网络切片是提供特定网络能力和网络特性的逻辑网…

  • Java线程池面试题

    1、什么是线程池2、常见线程池

  • 为什么香港服务器可以免备案

    为什么香港服务器可以免备案呢?这可能是许多朋友都回答不上来的话题,即使是经常使用香港服务器的用户也有部分人不清楚,那么今天我们就聊聊为什么香港服务器可以免备案:众所周知,我们国家实行的一国两制,所以香港地区在管理制度方面会和我们国内的不太一样,不仅是管理制度,包括法律,互联网使用规则也不一样。在国内,根据我国的互联网规定,网站所有者必须向国家有关部门申请实名备案,甚至部分网站还需要完成公安部备案,才能正常使用域名访问网站,且国内为净化互联网,也对许多内容进行限制;而香港则没有必须申请备案的要求,只要网站

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号