<!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. 数字化转型鸿沟如何消除？ROMA Connect融合集成，联接企业应用现在与未来

    摘要:ROMA Connect平台正在以"联接和融合"的方式,重塑传统企业上云的路径--"条条大路"通向云端. 本文分享自华为云社区<[大厂内参]第13期 ...

  2. 常用的echo和cat，这次让我折在了特殊字符丢失问题上

    摘要:用过linux的都知道,echo和cat是我们常用的展示内容和写入内容的方式. 本文分享自华为云社区<echo和cat,重定向到文件时,解决特殊字符丢失问题>,作者: 大金(内蒙的) ...

  3. 一文带你熟知ForkJoin

    摘要:ForkJoin将复杂的计算当做一个任务,而分解的多个计算则是当做一个个子任务来并行执行. 本文分享自华为云社区<[高并发]什么是ForkJoin?看这一篇就够了!>,作者:冰 河. ...

  4. System.out.printf 格式化输出

    System.out.printf @Test public void printTest() throws Exception { String str = "安倍晋三已无生命体征!!&q ...

  5. NOKOV度量光学动作捕捉系统工作流程

    如果你对影视.动画或者游戏有一定关注,相信你一定听说过"动作捕捉".事实上,无论是屏幕中的战场,还是真实的军事领域,从2K游戏中的虚拟球员,到医疗.康复.运动领域的专业研究:从机器 ...

  6. termius macos 破解版，激活版下载，永久激活，亲测可用

    termius 是一款非常值得推荐的 SSH/SFTP 跨平台终端工具,其十分亮眼的功能是可以上传文件夹,这是其他几款终端工具都不具备的,比如说 macOS 自带的终端.号称 21 世纪最强终端的 w ...

  7. PS组件相关BAPI

    一.新增组件BAPI "-----------------------------------------@斌将军-------------------------------------- ...

  8. SpringBoot 项目实战 | 瑞吉外卖 Day04

    该系列将记录一份完整的实战项目的完成过程,该篇属于第四天 案例来自B站黑马程序员Java项目实战<瑞吉外卖>,请结合课程资料阅读以下内容 该篇我们将完成以下内容: 文件上传下载 新增菜品 ...

  9. 0x61 图论-最短路

    B题 Telephone Lines https://ac.nowcoder.com/acm/contest/1055/B 中文题面:https://www.luogu.com.cn/problem/ ...

  10. 我发现明显产品bug啦

    1.  百度云在下载时,如果选中的文件过多,在点击下载后,不能即时取消所有的下载项! 如下图,点击""全部取消" 出现在列表中项全部消失,但后续新的项继续出现,仍在下载, ...