项目中不少地方用到了图表来进行数据展示,所以系统的学习一下。
官网链接:
http://echarts.baidu.com/index.html
导入一个简单的饼图:
项目需要jquery.js 和 echarts的类库。我是直接从我们项目中拷贝出来的类库,然后去官网找了一个饼图的样例。
项目结构:
static---echarts---chart----各种图形的Js文件
---echarts.min.js
--js--- jquery.min.js
test01.html
文件内容:
<body>
<div id="pie" style="height:500px;">
</div>
</body>
<!-- 需要引用的JS -->
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/echarts/echarts.min.js"></script>
<script type="text/javascript">
$(function(){
showPie();
});
function showPie(){
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : { //气泡提示框,常用于展现更详细的数据
trigger: 'item', //可选 axis:轴线触发, 折线图常用
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { //图例
orient : 'vertical',//布局方式 'horizontal' | 'vertical'
x : 'left' , //水平安放位置
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: { //工具箱,右上角那个
show : true,
feature : { //启用功能
mark : {show: true},
dataView : { //工具栏上的数据视图,可以直接往里面添加数据
show: true,
title : '数据视图',
lang: ['数据视图', '关闭1', '刷新1']
},
magicType : { //动态类型切换 又一种形状 切换为另一种形状
show: true,
type: ['pie', 'funnel'],
title: { funnel: '漏斗图切换'},
option: {
funnel: {
x: '15%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true, title : '还原'},
saveAsImage : {show: true, title : '保存为图片', lang : ['点击保存']}
}
},
calculable : true, //是否启用拖拽重计算的功能
series : [ //不用类型 通用信息
{
name:'访问来源',
type:'pie',
radius :[ '70%','20%'], //半径,支持绝对值(px)和百分比,百分比计算比,min(width, height) / 2 * 75%,
// 传数组实现环形图,[内半径,外半径]
center: ['50%', '60%'], //圆心位置
//roseType:'radius', //显示样式;默认为null,南丁格尔玫瑰图模式,'radius'(半径)|'area'(面积)
selectedMode:'multiple', //选中模式,点击的时候可以和整体分开 ,默认关闭可选single,multiple
data:[ //表类型不一样,格式也不一样
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
};
var chart = echarts.init($("#pie")[0]);
chart.setOption(option);
}
</script>
效果展示: