代码如下：

<!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. Python open 对应的参数

  2. 【Python】【有趣的模块】tqdm | inspect

    tqdm """ [tqdm] 显示循环的进度条,再也不用担心程序跑到哪里还要跑多久了 tqdm 可以直接包裹iterable对象 from tqdm import tq ...

  3. Educational Codeforces Round 23 F. MEX Queries 离散化+线段树

    F. MEX Queries time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  4. PHP中封装Redis购物车功能

    <?php // 服务层 namespace Common\Service; use Vendor\Func\Red; class CartService extends CommonServi ...

  5. sklearn dataset 模块学习

    sklearn.datasets官网:http://scikit-learn.org/stable/datasets/ sklearn.datasets 模块主要提供一些导入.在线下载及本地生成数据集 ...

  6. bufferedReader中的数据, 只是读过一次, 就没有了(拿走,自然就没了),只能读一次( load, readLine 等只要是读操作)

  7. eclipse配置tomcat后出现：java virtual machine launcher Error：Could not ……,Program will exit.

    原贴在stack overflow上:https://stackoverflow.com/questions/50085750/apache-tomcat-9-x-not-working-with-e ...

  8. 数据库 Mysql 使用，优化，索引

    数据库事务的隔离级别,由低到高 : READ UNCOMMITTED(读未提交数据):允许事务读取未被其他事务提交的变更数据,会出现脏读.不可重复读和幻读问题. READ COMMITTED(读已提交 ...

  9. java基础题集

    1.什么是java虚拟机?为什么java被称作是“平台无关的编程语言”? java虚拟机是一个可以执行java字节码的虚拟机进程.java源文件被编译成能被java虚拟机执行的字节码文件. java被 ...

  10. 00-python语言介绍

    以下为摘录的python的介绍 Python是一种解释型语言.这就是说,与C语言和C的衍生语言不同,Python代码在运行之前不需要编译.其他解释型语言还包括PHP和Ruby. Python是动态类型 ...