代码如下：

<!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. -第1章 HTMLCSS方法实现下拉菜单

    中英文的自动换行问题 把下面代码中的 javascript 改成 子菜单1 试试, 如果英文的话宽度会自动撑开, 用中文不会, 而直接转行下来. <ul> <li><a ...

  2. Java 字符串常用操作（String类）

    字符串查找 String提供了两种查找字符串的方法,即indexOf与lastIndexOf方法. 1.indexOf(String s) 该方法用于返回参数字符串s在指定字符串中首次出现的索引位置, ...

  3. JS基础---到底什么是闭包？它是如何形成的？

    1.闭包 先看一个简单的例子 function a() { var i = 0; function b() { alert(++i); } return b; }var c = a(); c(); 这 ...

  4. Centos7：查看某个端口被哪个进程占用

    查看端口被哪个进程使用的命令 netstat -lnp | grep 参考: https://blog.csdn.net/u010886217/article/details/83626236 htt ...

  5. ssh连接服务器

    1.命令行操作 第一步输入  :ssh 用户名@服务器外网ip 第二步:输入密码,回车 看到welcome提示信息即为登陆成功 输入:exit 退出 2.客户端操作 windows下载ssh软件,安装 ...

  6. EndNote基础教程

    endnote的使用方法 http://www.360doc.com/content/17/1211/08/31841004_711998509.shtml 导入文献 File-Import-Flod ...

  7. python IOError: [Errno 22] invalid mode ('r') or filename:

    如果你是报这个错误,可能是因为你的文件路径中的中文字符太多的缘故. 你可以将路径或者文件名称改为英文试试.

  8. PostCSS以及cssnext语法

    什么是postcss postcss 一种对css编译的工具,类似babel对js的处理,常见的功能如: 1 . 使用下一代css语法 2 . 自动补全浏览器前缀 3 . 自动把px代为转换成 rem ...

  9. openstack 重启服务命令

    重启openstack的整个服务openstack-service restart 1. 重启dashboardservice httpd restart service memcached rest ...

  10. Python Scrapy 爬虫框架实例（一）

    之前有介绍 scrapy 的相关知识,但是没有介绍相关实例,在这里做个小例,供大家参考学习. 注:后续不强调python 版本,默认即为python3.x. 爬取目标 这里简单找一个图片网站,获取图片 ...