Echarts——一个简单的嵌套饼图

 
</!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>QQ部
    星座分布图</title>
    <script src="http://echarts.baidu.com/dist/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:800px;height:800px"></div>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById(‘main‘));
        var option = {
            tooltip: {
                trigger: ‘item‘,
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },

            series: [
                {
                    name:‘星座‘,
                    type:‘pie‘,
                    selectedMode: ‘single‘,
                    radius: [‘75%‘, ‘96%‘],

                    label: {
                        normal: {
                            position: ‘inside‘,
                            fontSize: 20,
                            color:‘‘,
                            fontFamily:‘Microsoft Yahei‘
                        }
                    },
                    data:[
                        {value:4, name:‘双子座‘},
                        {value:3, name:‘白羊座‘},
                        {value:3, name:‘金牛座‘},
                        {value:2, name:‘天蝎座‘},
                        {value:2, name:‘双鱼座‘},
                        {value:2, name:‘处女座‘},
                        {value:2, name:‘射手座‘},
                        {value:1, name:‘摩羯座‘},
                        {value:1, name:‘天秤座‘},
                        {value:1, name:‘水瓶座‘},
                        {value:1, name:‘狮子座‘}
                    ]
                },
                {
                    name:‘姓名‘,
                    type:‘pie‘,
                    radius: [‘30%‘, ‘70%‘],
                    label: {
                        normal: {
                            position:‘inside‘,
                            align:‘right‘,
                            fontSize: 18,
                            fontFamily:‘Microsoft YaHei‘,
                            color:"#FFEFE0"
                        }
                    },
                    data:[
                        {value:1, name:‘X1‘},
                        {value:1, name:‘X2‘},
                        {value:1, name:‘X3‘},
                        {value:1, name:‘X4‘},
                        {value:1, name:‘M1‘},
                        {value:1, name:‘M2‘},
                        {value:1, name:‘M3‘},
                        {value:1, name:‘N1‘},
                        {value:1, name:‘N2‘},
                        {value:1, name:‘N3‘},
                        {value:1, name:‘D1‘},
                        {value:1, name:‘D2‘},
                        {value:1, name:‘D3‘},
                        {value:1, name:‘F1‘},
                        {value:1, name:‘F2‘},
                        {value:1, name:‘F3‘},
                        {value:1, name:‘G1‘},
                        {value:1, name:‘A1‘},
                        {value:1, name:‘W1‘},
                        {value:1, name:‘E1‘},
                        {value:1, name:‘E2‘},
                        {value:1, name:‘E3‘}
                    ]
                },
                {
                    name:‘部门‘,
                    type:‘pie‘,
                    radius: [‘0%‘, ‘25%‘],
                    label: {
                        normal: {
                            position: ‘center‘,
                            fontSize: 22,
                            fontFamily:‘Microsoft YaHei‘,
                            color:‘#80F0E3‘
                        }
                    },
                    data:[
                        {value:22, name:‘QQ部‘}
                    ]
                }
            ]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

显示效果如下：

解释：

  1. 设置网页标题：

    1. <title>QQ部星座分布图</title>
  2. 导入在线的echarts库：
    1. <script src="http://echarts.baidu.com/dist/echarts.js"></script>
  3. 设置页面尺寸：
    1. <div id="main" style="width:800px;height:800px"></div>
  4. 初始化echarts实例：
    1. var myChart = echarts.init(document.getElementById(‘main‘));
  5. 设置图表内容：
    1. var option = {}
  6. 在echarts实例中载入option：
    1. myChart.setOption(option);
  7. 对option的解释
    1. 包含了一个tooltip——用于动态显示数据标签，和三个series，series的类型为“pie”饼图。
    2. tooltip的显示格式为：formatter: "{a} <br/>{b}: {c} ({d}%)"，即显示数字和百分比。
    3. radius用于设置饼图的内外范围，如：radius: [‘75%‘, ‘96%‘]。
    4. 接下来设置标签的文本格式和数据内容即可。

原文地址：https://www.cnblogs.com/shadrach/p/8119483.html

时间： 2024-08-30 16:47:52

Echarts——一个简单的嵌套饼图的相关文章

echarts的简单应用之（二）饼图

接上一篇文章: echarts的简单应用之(一)柱形图:https://www.cnblogs.com/jylee/p/9359363.html 本篇文章讲述饼图,撇过折线图不说,是因为折线图与柱形图的数据传递方式一样,能理解柱形图就能理解折线图. Echarts官网上有实例可以查看到静态的饼图模型,这里只说后台数据的传递格式. 解释: 第一行中的代码中pie是图表的id选择器: levels: 等级的数组: brower: 是一个name,value相对应的数组,这也是饼图的数据格式的要求,当

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序

iOS开发UI篇—使用嵌套模型完成的一个简单汽车图标展示程序 一.plist文件和项目结构图 说明:这是一个嵌套模型的示例 二.代码示例: YYcarsgroup.h文件代码: // // YYcarsgroup.h // 07-汽车展示(高级) // // Created by apple on 14-5-28. // Copyright (c) 2014年 itcase. All rights reserved. // #import <Foundation/Foundation.h> @

230行实现一个简单的MVVM(转载)

https://zhuanlan.zhihu.com/p/24475845 作者:mirone链接:https://zhuanlan.zhihu.com/p/24475845来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 题图的PixivID为:pixiv-ID: 14402942,画师为RAHWIA 本文始发于我的博客,转载请注明作者. MVVM这两年在前端届掀起了一股热潮,火热的Vue和Angular带给了开发者无数的便利,本文将实现一个简单的MVVM,用20

230行实现一个简单的MVVM

作者:mirone链接:https://zhuanlan.zhihu.com/p/24451202来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. MVVM这两年在前端届掀起了一股热潮,火热的Vue和Angular带给了开发者无数的便利,本文将实现一个简单的MVVM,用200多行代码探索MVVM的秘密.您可以先点击本文的JS Bin查看效果,代码使用ES6,所以你可能需要转码. 什么是MVVM? MVVM是一种程序架构设计.把它拆开来看应该是Model-View-V

Android学习路线（四）构建一个简单的UI

Android应用的图形化用户界面的构建使用的是View 和 ViewGroup 对象的层次嵌套. View 对象通常是UI部件,例如 buttons 或者 text fields ,而 ViewGroup 是用来定义它的子布局如何排布的容器,它通常是不可见的,例如一个网格或者一个垂直的列表. Android提供XML词汇与View或者ViewGroup的子类的对应,这样的话你就可以通过XML元素的层级嵌套来定义你的UI. 另一种布局 使用XML声明UI比在运行时代码中声明更有用处可以在很多地方

C#如何实现一个简单的流程图设计器

以前看过不少Window Form开发的流程图设计器,支持节点拖放,非常方便即可设计出很美观的流程图,作为一个程序员,对其内部实现原理一直很好奇,感叹有朝一日自己如果可以开发一款类似的软件那是多么让人兴奋的事情呀!自从有了这样的想法,一直都在积累和学习这方面的知识,最近一个偶然的机会竟然实现了一个简单的流程图设计器(虽然其功能还有很多不完善之处,但是心中还是非常高兴,满满的成就感). 话不多说,先看一下实现的主界面效果: 左边是一个ListView(listView1),右边的画布是一个Pane

我们为之奋斗过的C#-----C#的一个简单理解

我们首先来简单叙述一下什么是.NET,以及C#的一个简单理解和他们俩的一个区别. 1 .NET概述 .NET是Microsoft.NET的简称,是基于Windows平台的一种技术.它包含了能在.NET Framework平台运行的所有编程语言. 2 C#概述 他是专门为.NET平台设计的一种语言. 3 .NET与C#的区别 .NET是一种平台,这种平台可以编译多种语言例如:VB,J#,而C#只是一种语言. 4 IDE IDE全称(Itergrated Developer Environment)

实现一个简单的个人助理

实 验 报 告 日期:2015年5月10日              院(系):信息科学与技术学院       专业(班级):计算机类 实验题目:实现一个简单的个人助理                                                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流,请勿直接copy 一.     实验目的 1.    本实验面向C++语言的初学者. 2.    主要让实验者熟悉类的使用. 二

js 排列 组合 的一个简单例子

最近工作项目需要用到js排列组合,于是就写了一个简单的demo. 前几天在网上找到一个写全排列A(n,n)的code感觉还可以,于是贴出来了, 排列的实现方式: 全排列主要用到的是递归和数组的插入 比如12的全排列,首先把1拿出来放到elementCur,再获取由1组成的数组[2],然后在循环把1插入到0,1的位置后再返回1,2][2,1] 如果是123那么首先获取23的全排列[2,3][3,2],然后在插入1,[1,2,3][2,1,3][2,3,1][1,3,2][3,1,2][3,2,1]