代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

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

    <div id="main" style="width: 600px;height:400px;"></div>

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

    <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>

    <script>

    //获取容器的id并赋值给变量myChart

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

    /*用来配置参数*/

    var option = {

    title : {

        text: '某站点用户访问来源',

        subtext: '纯属虚构',

        x:'center'

    },

    tooltip : {

        trigger: 'item',

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

    },

    legend: {

        orient: 'vertical',

        left: 'left',

        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

    },

    series : [

        {

            name: '访问来源',

            type: 'pie',

            radius : '55%',

            center: ['50%', '60%'],

            data:[

                {value:335, name:'直接访问'},

                {value:310, name:'邮件营销'},

                {value:234, name:'联盟广告'},

                {value:135, name:'视频广告'},

                {value:1548, name:'搜索引擎'}

            ],

            itemStyle: {

                emphasis: {

                    shadowBlur: 10,

                    shadowOffsetX: 0,

                    shadowColor: 'rgba(0, 0, 0, 0.5)'

                }

            }

        }

    ]

};

     /*调用option生成图表*/

    myChart.setOption(option)

    </script>

</body>

</html>

效果如下：

Echarts 简单报表系列三：饼状图的更多相关文章

  1. Echarts 简单报表系列四：雷达图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. Echarts 简单报表系列二：折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ECharts学习（2）--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

  4. Echarts 简单报表系列一：柱状图

    见代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. [BOT]自己动手实现android 饼状图，PieGraphView，附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  6. Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例

    ​  目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...

  7. ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  8. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  9. canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

随机推荐

  1. sublime插件开发手记

    原:http://blog.hickwu.com/sublime插件开发手记   标题: sublime插件开发手记 时间: 2014-01-05 14:58:02 正文: 插件基本结构 基本插件实现 ...

  2. Codeforces Round #367 (Div. 2) D. Vasiliy's Multiset（01字典树求最大异或值）

    http://codeforces.com/contest/706/problem/D 题意:有多种操作,操作1为在字典中加入x这个数,操作2为从字典中删除x这个数,操作3为从字典中找出一个数使得与给 ...

  3. 在Idea创建Spring Boot + MyBatis的web项目

    创建步骤如下 选择Spring initializr  2. 修改group 与 atifact id,点击next 3. dependencies里面选择Web->Web , SQL -> ...

  4. Codeforces Round #290 (Div. 2) E. Fox And Dinner 网络流建模

    E. Fox And Dinner time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  5. java stackoverflowerror与outofmemoryerror区别（转）

    1.stackoverflow: 每当java程序启动一个新的线程时,java虚拟机会为他分配一个栈,java栈以帧为单位保持线程运行状态:当线程调用一个方法是,jvm压入一个新的栈帧到这个线程的栈中 ...

  6. js，jq获取父，兄弟，子节点整理

    js获取节点 父: parentNode 获取已知节点的父节点. 子: childNodes; 得到全部子节点 children 得到全部子节点 firstChild 获得第一个子节点 lastChi ...

  7. Django 操作Mysql数据库

    pip安装mysqlclient sudo ln -s /usr/local/mysql/bin/mysql_config /usr/local/bin/mysql_config sudo pip i ...

  8. Android 用虹软SDK做人脸识别

    人脸识别第三方sdk比较多,但是大多都是收费的或者限制次数什么的,虹软的效果还不错,全免费也不需要联网 V1.2版本使用和快速集成:https://www.jianshu.com/p/8dee89ec ...

  9. Golang websocket

    环境:Win10 + Go1.9.2 1.先下载并引用golang的websocket库 ①golang的官方库都在https://github.com/golang下,而websocket库在/ne ...

  10. 猫眼电影爬取(一)：requests+正则，并将数据存储到mysql数据库

    前面讲了如何通过pymysql操作数据库,这次写一个爬虫来提取信息,并将数据存储到mysql数据库 1.爬取目标 爬取猫眼电影TOP100榜单 要提取的信息包括:电影排名.电影名称.上映时间.分数 2 ...