代码如下：

<!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. js replace使用及正则表达式使用

    本文为博主原创,未经允许不得转载: js中replace方法与java中的replace方法相同,主要做替换. 表达式:stringObj.replace(rgExp, replaceText) 参数 ...

  2. Vs Code搭建 TypeScript 开发环境

    一.npm install -g typescript 全局安装TypeScript   二.使用Vs Code打开已创建的文件夹,使用快捷键Ctrl+~启动终端输入命令 tsc --init 创建t ...

  3. js之鼠标随动后面跟随事件(类似于长龙跟着跑)

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

  4. 动态拼接SQL 语句

    public T Get<T>(int id) { Type type = typeof(T); string columnStrings = string.Join(",&qu ...

  5. hdu 3832 Earth Hour bfs

    Earth Hour Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 125536/65536 K (Java/Others) Prob ...

  6. P1005 矩阵取数游戏

    传送门 思路: △ 区间动规 对于每行,有 f [ i ][ j ] 代表取区间 [ i , j ] 的最大值. 然后转移方程我们考虑,对于每一个新的 f [ i ][ j ],有两种情况(下面定义  ...

  7. 前端调用接口报错看不到报错响应时 console.dir

    console.dir() 可以看到很多.log看不到的属性和方法

  8. 用图来教你怎样用Photoshop蓝底转换红底

      教你怎样用红底转换成蓝底.PS其实学了这个,你就可以在白底红底蓝底之间不同转变了.   第一步   第二步   第三步   第四步         最后给你们看看对比效果图

  9. Memcached遇到的问题及解决办法

    1. memcached make: *** No targets specified and no makefile found. Stop. 其实是因为在安装libevent时增加了版本号导致的, ...

  10. 如何通过ssh远程登录内网的Mac和Linux系统？

    神器:ngrok 用法很简单,安装后 验证授权: ./ngrok authtoken 3WWujp1TEtHRo6rphEi5Y_7MBqGWm9yThCSFyqEHgip 在内网开启tcp服务 ng ...