ECharts是一个非常好用的插件,用于进行 树状图,折线图,饼图,地图等等,系列视图的绘制。(详情看官网)
https://www.echartsjs.com/index.html (官网)
了解:
AMD:模块化开发方式;
引入文件后:console.log(echarts) //得到一个echarts的对象
options:选项;
图表介绍:
柱状图(bar)
折线图(line)
饼图(pie)
散点图(scatter)
地图(map)
气泡图(bubble)
前提工作:
1.引入插件
2.设一个视图容器,为行内样式,
3.设置一个id,以便进行dom获取
插件的使用分为3个步骤;
第一步:
//初始化视图环境
使用 var myecharts=echarts.init() 里面的参数就是,对dom元素的获取
那么 myecharts 就是他的实例对象
第二步:
//配置信息 变量名随便取
var opaction={
title:{ //title:图表的标题
},
legend:{ //legend 图例组件
},
xAxis:{ //x轴坐标
},
Yaxis:{ //y轴坐标
},
series:{ //系列列表
},
tooltip:{ //提示框组件
formatter: //这个属性,便可显示具体的值,百分比,名称,等
}
}
详情看官网
第三部:
//将配置好的信息方法 实例对象上
myecharts.setOption(opaction);
下面会有一个案例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>饼图</title>
<style>
#main{
border:red 1px solid;
}
</style>
</head>
<body>
<div id="main" style="600px;height:400px">
</div>
</body>
</html>
<script src="echarts.js"></script>
<script>
var myecharts=echarts.init(document.getElementById("main"));
var opaction={
title:{
text:"饼图",
left:"center",
textStyle:{
color:"red"
}
},
series:{
type:"pie",
data:[
{
name:"web",
value:120
},
{
name:"android",
value:30
},
{
name:"ios",
value:30
},
{
name:"java",
value:50
},
{
name:"python",
value:70
},
{
name:"php",
value:60
}
]
},
tooltip:{
formatter:"{b}:{d}%"
}
};
myecharts.setOption(opaction);
</script>