Echarts 简单报表系列三:饼状图
2024-10-18 00:42:56
代码如下:
<!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>
效果如下:
最新文章
- 实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室
- IT行业常谈的优雅
- DX使用texconv工具批处理dds格式图片
- mysql中sql语句
- tomcat部署新的项目的时候出现报错信息: Invalid byte tag in constant pool: 15
- (八)C语言结构体和指针
- Qt... configure: error: Qt (>;= Qt 2.2.2) (headers…
- (转)如何把exe的flash还原成swf
- scala编程笔记(三)类,字段和方法
- [cocos2d demo]认字小游戏
- 【贪心】【Uva11729】 Commando War
- Leetcode 226 Invert Binary Tree python
- MySQL自增列锁模式 innodb_autoinc_lock_mode不同参数下性能测试
- 摘选改善Python程序的91个建议
- Intellij idea常用快捷键和技巧
- kafka指定partition的分区规则
- 洛谷P4155 [SCOI2015]国旗计划(贪心,树形结构,基数排序)
- 自动化web前端测试,自动登录网站.目前发现最靠谱的方法是imacros
- Python 数值计算库之-[Pandas](六)
- TeamWork#3,Week5,Scrum Meeting 11.16
热门文章
- ESP8266 使用
- Javascript 高级程序设计(第3版) - 第01章
- POJ 3693 Maximum repetition substring(连续重复子串)
- Python 汉诺塔游戏
- error LNK2019-无法解析的外部符号 _main-该符号在函数 ___tmainCRTStartup 中被引用
- 重温js之null和undefind区别
- chrome浏览器的SwitchyOmega插件使用方法
- 理解 Redis(1) - Redis 简介
- /usr/bin/perl:bad interpreter:No such file or directory 的解决办法
- linux中date命令显示