<!DOCTYPE html>

<html>

<!-- https://blog.csdn.net/weixin_42698255/article/details/89249531 -->

<head>

    <meta charset="utf-8">

    <title>五分钟上手之饼状</title>

    <!-- 引入 echarts.js -->

    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>

    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 800px;height:700px; background: pink;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        myChart.setOption({

            tooltip: {

                trigger: 'item',

                formatter: "{a} <br/>{b}: {c} ({d}%)"

            },

            title: {

                text: '我是第一饼状图',

                subtext: '我是第一个的副标题',

                x: 'center',

                y: '630px',

                // 控制主标题的样似

                textStyle: {//主标题的属性

                    color: '#C28D21',//颜色

                    fontSize: 24,//大小

                    fontWeight:400,//

                },

                // 控制副标题的样似

                subtextStyle: {//副标题的属性

                    color: '#C28D21',

                    fontSize: 24,//大小

                },

            },

            series: [{

                name: '访问来源',

                type: 'pie',

                radius: ['50%', '70%'],

                avoidLabelOverlap: false,

                label: {

                    normal: {

                        show: false,

                        position: 'center'

                    },

                    emphasis: {

                        show: true,

                        textStyle: {

                            fontSize: '30',

                            fontWeight: 'bold'

                        }

                    }

                },

                labelLine: {

                    normal: {

                        show: false

                    }

                },

                data: [{

                        value: 12,

                        name: '在线',

                        itemStyle: {

                            color: '#005eff'

                        }

                    },

                    {

                        value: 3,

                        name: '离线',

                        itemStyle: {

                            color: '#ff9194'

                        }

                    },

                ]

            }]

        });

    </script>

</body>

</html>

echarts设置标题样式的更多相关文章

  1. 在Word中为标题样式添加自动编号功能

    原文地址:http://blog.chinaunix.net/uid-16685753-id-2738270.html 摘要: 本文可以帮助你在Office 2007中为Word标题样式添加和设置自动 ...

  2. 修改文档框架：word-多级列表与标题样式相结合

    转自:http://blog.sina.com.cn/s/blog_6721f25c0100nuf0.html 设置标题的时候希望出现多标题并且自动编号的标题,如下1.     XXXXXXXXXXX ...

  3. asp.net将页面内容按需导入Excel，并设置excel样式，下载文件(解决打开格式与扩展名指定的格式不统一的问题)

    //请求一个excel类 Microsoft.Office.Interop.Excel.ApplicationClass excel = null; //创建 Workbook对象 Microsoft ...

  4. asp.net数据导出到excel表格，并设置表格样式

    1.首先在项目中添加引用

  5. 配置Info.plist (设置状态栏样式、自定义定位时系统弹出的提示语、配置3DTouch应用快捷菜单)

    一.概述 iOS中很多功能需要配置Info.plist才能实现,如设置后台运行.支持打开的文件类型.自定义访问隐私内容时弹出的提示等.了解Info.plist中各字段及其含义,可以访问苹果开发网站相关 ...

  6. 使用word设置标题级别， 自动生成和大纲对应的多级列表， 自动生成索引目录

    作为程序员,只会开发是不够的, 在日常工作中还需要掌握一些办公软件的的操作方法,word excel ppt精通不敢, 暂且入个门吧, 在前后台开发配合过程中,能写的一手好文档将会达到事半功倍的效果, ...

  7. C# worksheet设置Excel样式

    1.例子导出Excel的样式 样式代码 public void Exportdatagridviewtoexcel(string Textname) { SaveFileDialog savedial ...

  8. word设置标题1,标题2,标题3项目编号联动

    word经常要按层级显示标题,并且标题样式之间要联动 如: 设置办法: word内鼠标右键 2.选择项目符号和编号 3.选择一个样式并自定义 将级别链接到样式.选择对应标题样式即可实现联动.

  9. gulp-sass设置不同样式风格的输出方法

    sass最终输出的样式包括下面几种样式风格:嵌套输出方式 nested展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed sass: nav { ul { ...

  10. C# worksheet设置Excel样式(转载)

    1.例子导出Excel的样式public void Exportdatagridviewtoexcel(string Textname) { SaveFileDialog savedialog = n ...

随机推荐

  1. 5种Python使用定时调度任务的方式

    摘要:Python 有几种方法可以定时调度一个任务,这就是我们将在本文中学习的内容. 本文分享自华为云社区<Python中使用定时调度任务(Schedule Jobs)的5种方式)>,作者 ...

  2. web messaging与Woker分类：漫谈postMessage跨线程跨页面通信

    web messaging 跨文档通信(cross-document messaging):跨就是我们国内更为熟知的HTML5 window.postMessage()应用的那种通信: 通道通信(ch ...

  3. 2023开发者必备iOS开发工具

    ​ 2023开发者必备iOS开发工具 工欲善其事,必先利其器.进行开发工作时,利用并熟练使用恰当的工具可以让工作效率得到大幅度提高.下边会介绍一些在进行iOS开发工作时常用的一些工具,本文并不对其进行 ...

  4. 以平安银行“智能化银行3.0”实践，看火山引擎DataTester如何助推金融行业数智化进程

    作者:DataTester   银行业正在进入一场围绕客户为中心的新革命时期.流量红利逐渐消失,银行零售进入存量客户精细化经营时代:"互联网+"给金融带来更多的场景,智能化成为零售 ...

  5. Solon Logging 日志插件的记录器、添加器级别控制

    有需要的人可以记下 solon.logging.appender: console: level: TRACE #设置级别,默认为 TRACE enable: true #是否启用,默认为 true ...

  6. kubernetes实战(三十一)：Prometheus监控Windows主机

    1. 基本说明 使用Prometheus监控Windows主机和Linux主机并无太大区别,都是使用社区的Exporter进行采集数据,之后暴露一个接口,可以让Prometheus采集到主机的数据. ...

  7. Kubernetes(K8S) 安装Nacos，报 No DataSource set

    原因,数据库为 MySQL 5.7 需要在yaml加上参数 mysql.db.param: "characterEncoding=utf8&connectTimeout=1000&a ...

  8. PS CJ37/CJ38 增加和返回预算

    一.预算补充CJ37/预算返回CJ38 二.补充预算CJ37,点击保存 预算返回CJ38,点击保存 三.代码示例 预算补充代码 "------------------------------ ...

  9. 【每日一题】28. 模拟战役 (模拟 + DFS/BFS/并查集)

    补题链接:Here 本题属于一道模拟题 虽然这题介绍一大堆,总结起来就是几句话,给出地图n列,前4行是a的地盘,后四行是b的地盘,每个人地盘上面有星号代表大炮. 大炮会 3 * 3的波及周围,会一直传 ...

  10. springboot线程池的使用方式1

    线程池的创建方法 总共有 7 种,但总体来说可分为 2 类: 一类是通过 ThreadPoolExecutor 创建的线程池: 另一个类是通过 Executors 创建的线程池. 1. Executo ...