<!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. 传统数据库改造难？华为云GaussDB“五心”解决

    摘要:快来看看华为云GaussDB奉上的"五心"诚意吧~ 本文分享自华为云社区<传统数据库改造难?华为云GaussDB"五心"解决>,作者: Gau ...

  2. IAST 初探：博采众长、精准定位、DevOps友好

    之前的文章中,我们了解了 SAST 和 DAST,本文将介绍将两者优势相结合的安全测试技术--IAST. ✦ ✦ 交互式应用安全测试(IAST)是一个自动识别和诊断应用程序和 API 漏洞的技术,它结 ...

  3. PPT 画册风格

    图片嵌入 图片填充 图片裁剪 字体 PPT 关掉再打开. 排列对齐 图片下载 https://www.pexels.com http://www.500px.com http://www.bing.c ...

  4. Kubernetes(K8S) 介绍

    Master Api Server 统一入口,以 Restful 方式,交给 etcd 存储 Scheduler 节点调试,选择 Node 节点,做应用部署 Controller Manager 处理 ...

  5. Windows 2016 安装 Jenkins

    Docker Jenkins 安装配置 Windows 2016 安装 Jenkins Jenkins + SVN Jenkins + SVN/Git + Maven + Docker + 阿里云镜像 ...

  6. Bug生命周期

    新建,确认,解决,重新验证,关闭,重新打开 一个Bug由测试人员发现并提交,我们将状态标注为新建:开发人员接收了该Bug,将Bug的状态修改为已分配,表示已经认可:开发人员解决了该bug后,就将bug ...

  7. ZK--简介，部署

    官网:https://zookeeper.apache.org/ 本文zk版本:3.7.0 一.简介 ZooKeeper 是一个高可用的分布式数据管理与系统协调软件,它可以为分布式应用提供状态同步.配 ...

  8. 【HZERO】班翎工作流

    班翎工作流 工作流流程 流程分类定义 接口管理 long类型写0 字符串写空 流程定义[画流程图] 人工节点-添加审批人规则 空-全局事件-选回调接口 我的待办 流程平台-我参与的流程 发起流程:wo ...

  9. C#写日志工具类(新版)

    源码:https://gitee.com/s0611163/LogUtil 昨天打算把我以前写的一个C#写日志工具类放到GitHub上,却发现了一个BUG,当然,已经修复了. 然后写Demo对比了NL ...

  10. 【Linux API 揭秘】module_init与module_exit

    [Linux API 揭秘]module_init与module_exit Linux Version:6.6 Author:Donge Github:linux-api-insides 1.函数作用 ...