echarts空心圆 中间带统计 自定义样式

            let option = {
                color:[‘#FFD700‘,‘#00CED1‘,‘#32CD32‘,‘#1E90FF‘],   //环形颜色
                tooltip: {
                    trigger: ‘item‘,
                    formatter: ‘{a} <br/>{b}: {c} ({d}%)‘
                },
                graphic: [{
                    type: ‘text‘,
                    top: ‘48%‘,
                    left: ‘center‘,
                    style: {
                        text: ‘2888‘,
                        fontSize: ‘0.6rem cursive‘,
                        textAlign: ‘center‘,
                        fill: ‘#13a7d1‘,
                    }
                },
                {
                    type: ‘text‘,
                    top: ‘42%‘,
                    left: ‘center‘,
                    style: {
                        text: "总计(人)",
                        fill: "#999",
                        fontSize: ‘0.22rem cursive‘,
                    }
                }],
                series: [
                    {
                        name: ‘访问来源‘,
                        type: ‘pie‘,
                        radius: [‘40%‘, ‘60%‘],
                        label: {
                            formatter: ‘ {b|{b}:}{c|{c}}‘,
                            backgroundColor: ‘#eee‘,
                            //borderColor: ‘#aaa‘,
                            borderWidth: 1,
                            borderRadius: 20,
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: ‘#999‘,
                            padding: [10, 30],
                            rich: {
                                b: {
                                    fontSize: ‘0.22rem cursive‘,
                                    color: ‘#676767‘,
                                },
                                c: {
                                    fontSize: ‘0.22rem cursive‘,
                                    color: ‘#30B6A2‘,
                                }
                            }
                        },
                        data: [
                            { value: 335, name: ‘A1‘ },
                            { value: 310, name: ‘A2‘ },
                            { value: 234, name: ‘A3‘ },
                            { value: 135, name: ‘A4‘ },
                        ]
                    }
                ]
            };

第二种

const totalLabel="总计";
            const totalValue="123";
            let option = {
                devicePixelRatio: window.devicePixelRatio,
                legend: {
                  show: false
                },
                series: [
                  {
                    type: "pie",
                    radius: [10, 10],
                    silent: true,
                    label: {
                      normal: {
                        show: true,
                        position: "center",
                        formatter: () => {
                          return `{a|${totalLabel}}\n{p|}\n{b|${totalValue}}{pre|人}`;
                        },
                        rich: {
                          a: {
                            fontSize: 24,
                            color: "rgba(0,0,0,0.45)"
                          },
                          p: {
                            width: "100%",
                            height: "24"
                          },
                          b: {
                            fontSize: 48,
                            color: "rgba(0,0,0,0.85)"
                          },
                          pre: {
                            fontSize: 24,
                            color: "rgba(0,0,0,0.45)"
                          }
                        }
                      },
                      emphasis: {
                        show: false
                      }
                    },
                    data: [{ value: 0, name: "", selected: true }]
                  },
                  {
                    type: "pie",
                    radius: ["35%", "60%"],
                    label: {
                      formatter: `{b}\n {c}`,
                      fontSize: 22,
                      color: "rgba(0,0,0,.65)"
                    },
                    data: [
                        { value: 335, name: ‘A1‘ },
                        { value: 310, name: ‘A2‘ },
                        { value: 234, name: ‘A3‘ },
                        { value: 135, name: ‘A4‘ },
                    ]
                  }
                ],
                color: ["#1890FF", "#13C2C2", "#2FC25B", "#FACC14", "#F04864"]
              };

原文地址:https://www.cnblogs.com/kkvt/p/12275068.html

时间: 2024-10-20 11:15:01

echarts空心圆 中间带统计 自定义样式的相关文章

用css实现一个空心圆,并始终放置在浏览器窗口左下角

用css实现一个空心圆,并始终放置在浏览器窗口左下角         div{                 position:fixed;                 bottom:0;                 left:0;                 width:100px;                 height:100px;                 border:2px solid #000;                 border-radius:

html5 &lt;canvas&gt;第二篇 strokeRect strokeStyle() strokeStyle() createLinearGradient addColorStop 用法 实心圆,空心圆,渐变

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <link href="css.css" rel="stylesheet" type="text/css

css 空心圆

用css实现一个空心圆,并始终放置在浏览器窗口左下角        div{                position:fixed;                bottom:0;                left:0;                width:100px;                height:100px;                border:2px solid #000;                border-radius:100px;} 

WPF DataGrid自定义样式

WPF DataGrid自定义样式 微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师).下面,找到我的小抄造型的网格.它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱. 在DataGrid中的最高水平,你可以改变的外观和感觉,通过设置一些: Property Type Values Default AlternatingRowBackground Brush Any Brush Null Background Brush Any

WPF自定义样式篇-DataGrid

WPF自定义样式篇-DataGrid 先上效果图: 样式: <!--DataGrid样式-->    <Style TargetType="DataGrid">        <Setter Property="RowHeaderWidth" Value="0"></Setter>        <Setter Property="AutoGenerateColumns"

超详细的Xcode代码格式化教程,可自定义样式

为什么要格式化代码 当团队内有多人开发的时候,每个人写的代码格式都有自己的喜好,也可能会忙着写代码而忽略了格式的问题. 在之前,我们可能会写完代码后,再一点一点去调格式,很浪费时间. 有了ClangFormat插件后,就可以一键把代码格式化成统一的样式,不仅节省了时间,也使得代码更规范.我们还可以定制自己喜欢的样式. 安装ClangFormat插件 可以手动安装(下载GitHub项目编译),也可以用Alcatraz(插件管理器)安装,都很简单,具体可以看我的文章<Xcode方便开发的插件推荐>

SeekBar自定义样式

网上的SeekBar自定义样式的资料很多,大多是抄来抄去.我最近用到这个,也从网上抄了一个,但是遇到不少问题,其中一个就是SeekBar的背景条不显示,最后才找到解决方法. 1. 使用自定义SeekBar <SeekBar android:id="@+id/ctrl_seekBar" android:layout_width="wrap_content" android:layout_height="wrap_content" androi

[android] 安卓自定义样式和主题

简单练习自定义样式和主题,样式是加在View上,主题是加在Application或者Activity上 styles.xml <?xml version="1.0" encoding="utf-8"?> <resources xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 自定义样式 --> <style name=&quo

纯css兼容个浏览器input[type=&#39;radio&#39;]不能自定义样式

各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-account"> <input type="checkbox"> <span>记住账号</span> </div> //css .remember-account { display: inline-block; font-siz