<!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. 云图说｜ASM灰度发布，让服务发布变得更敏捷、更安全

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:通常产品优化迭代的 ...

  2. IoT技术的最后决战！百万大奖究竟花落谁家？

    2022年5月25日华为云IoT创新应用开发大赛决赛路演正式打响! 华为云IoT创新应用开发大赛是华为云面向IoT产业领域的重量级精品赛事,自去年11月上线以来,受到了物联网协会.生态伙伴.产业基地等 ...

  3. 云小课｜ModelArts Pro 视觉套件 零代码构建视觉AI应用

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:ModelArts ...

  4. 火山引擎A/B测试在消费行业的案例实践

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,火山引擎数智平台举办了"走进火山-全链路增长:数据飞轮转动消费新生力"的活动,其中火山引 ...

  5. 限时促销，火山引擎 ByteHouse 为企业带来一波数智升级福利！

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 面对庞杂的海量数据,稳定高速的实时数据处理能力,成为了当下企业数智升级过程中备受关注的点. ByteHouse 是 ...

  6. ImportError: /lib64/libstdc++.so.6: version `CXXABI_1.3.8' not found

    [root@localhost PaddleOCR]# strings /lib64/libstdc++.so.6 | grep 'CXXABI' CXXABI_1.3 CXXABI_1.3.1 CX ...

  7. 哈佛大学《CS50 Python人工智能入门》公开课 (2020)

    课程介绍 本课程探讨现代人工智能基础上的概念和算法,深入探讨游戏引擎.手写识别和机器翻译等技术的思想.通过实践项目,学生在将图形搜索算法.分类.优化.强化学习以及其他人工智能和机器学习的主题融入到他们 ...

  8. Tomcat--多实例

    配置信息 centos:7.8 tomcat:7.0.3 instans1:/usr/local/tomcat/instans1 8081 instans2:/usr/local/tomcat/ins ...

  9. Divide by Zero 2021 and Codeforces Round #714 (Div. 2) 个人补题记录

    补题链接:Here A. Array and Peaks 题意:给定 数组大小 \(n\) 和 峰值点 \(k\) 请问是否存在这样的排序,不存在则输出-1 先序从 i = 2 开始填,依次 i += ...

  10. AtCoder Beginner Contest 179 个人题解（C欧拉筛，D前缀和，E循环节，F线段树）

    补题链接:Here A - Plural Form 字符串,末尾有 s 的加es,不然加 s . B - Go to Jail 输入的时候判断一下是否连续相等即可 C - A x B + C (mat ...