ECharts是由百度团队开发的，可高度个性化定制的数据可视化图表库。它的底层依赖轻量级的Canvas类库ZRender，是一个纯JavaScript的图标库，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流浏览器，可以运行在PC和移动设备上。
1.简单的柱状图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts</title>
<script src="echarts (1).js"></script>
</head>
<body>
<!--为eharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
//基于准备好的dom,初始化echarts实例
var myChart=echarts.init(document.getElementById("main"));
var option={
//标题
title:{
text:'简单的柱状图'
},
//提示框组件
tooltip:{},
//图例
legend:{data:['销量']},
//x轴
xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},
//y轴
yAxis:{},
//系列列表。每个系列通过type决定自己的图标类型
series:[{
name:'销量',
type:'bar',
data:[5,20,36,10,10,20]
}]
};
;
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
可视化效果如下:
简单的折线图:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="echarts (1).js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel:{
//间隔
interval:0,
//旋转角度
rotate:90
}
},
yAxis: {
type: 'value'
},
tooltip:{
trigger:'axis'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>运行效果如下所示:
简单的饼图:
<!doctype html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<title>简单的饼图</title>
</head>
<body style="height:100%;margin:0">
<div id="container" style="height:100%"></div>
<script type="text/javascript" src="echarts (1).js"></script>
<script type="text/javascript">
var dom=document.getElementById("container");
var myChart=echarts.init(dom);
var app={};
option=null;
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:'65%',
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)'
}
}
}]
};
;
if(option && typeof option === "object"){
myChart.setOption(option,true);
}
</script>
</body>
</html>
运行效果如下所示:
简单的散点图:
<!doctype html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>散点图</title>
</head>
<body style="height:100%;margin:0">
<div id="container" style="height:100%"></div>
<script type="text/javascript" src="echarts (1).js"></script>
<script type="text/javascript">
var dom=document.getElementById("container");
var myChart=echarts.init(dom);
var app={};
option=null;
option={
xAxis:{},
yAxis:{},
series:[{
symbolSize:40,
data:[
[10.0,8.04],
[8.0,6.95],
[13.0,7.58],
[9.0,8.81],
[11.0,8.33],
[14.0,9.96],
[6.0,7.24],
[4.0,4.26],
[12.0,10.84],
[7.0,4.82],
[5.0,5.86]
],
type:'scatter'
}]
};
;
if (option && typeof option === "object"){
myChart.setOption(option,true);
}
</script>
</body>
</html>
运行效果如下所示：
