代码如下:

<!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. word设置行距18磅

    参考:word如何设置行距18磅 word设置行距18磅 选中需要设置的段落--"格式"菜单--段落--"缩进和间距"标签--在"行距"下拉 ...

  2. 【译】第15节---数据注解-StringLength

    原文:http://www.entityframeworktutorial.net/code-first/stringlength-dataannotations-attribute-in-code- ...

  3. C++ 复习要点、面试常见问题总结

    本文总结一下C++面试时常遇到的问题.C++面试中,主要涉及的考点有: 关键字极其用法,常考的关键字有const, sizeof, typedef, inline, static, extern, n ...

  4. Pycharm设置去除显示的波浪线

    1.选择文件选择file—Settings,如下图打开setting对话框 2.选择Editur—Color Scheme—General选项,然后选择右边对话框中的Errors and Warnin ...

  5. SqlParameter的两种用法【二】

    private void Loadprovince() { string sql = "select * from Tables where ArealdPid=@pid"; /第 ...

  6. VS2010_DLL_共享数据段

    1.问题:写了一个DLL,自己一直测试不成功(程序A设置了 数值之后,程序B 始终读不到 读出来的都是初始化时的数值...) 具体过程: (1).DLL当初没想要用 共享数据段,测试使用 一直都是OK ...

  7. this 指向 及 调用方式

    1. this 指向 函数执行方式 this指向1.直接圆括号 window2.对象调用 对象3.事件触发 触发对象4.定时器运行 window (常常定义变量存储this以达到this指向特定对象) ...

  8. Codefroces 958C2 - Encryption (medium)

    C2 - Encryption (medium) 思路: 传统的dp: dp[i][j] 表示到第i个位置为止,分成j段的最大值 dp[i][j] = max(dp[l][j-1] + (sum[i] ...

  9. Codeforces 801C - Voltage Keepsake

    C. Voltage Keepsake 题目链接:http://codeforces.com/problemset/problem/801/C time limit per test 2 second ...

  10. Codeforces 797C - Minimal string

    C. Minimal string 题目链接:http://codeforces.com/problemset/problem/797/C time limit per test 1 second m ...