http://echarts.baidu.com
可以在该网址下载echarts.js文件
在使用百度图表的HTML文档中加载下载的echarts.js文件:
<script type="text/javascript" src="js/echarts.js"></script>
html中创建一个容器,并为其设置宽和高
<div id="box"></div>
/*css*/
#box{
width:600px;
height:600px;
border:1px solid #ff5857;
}
自定义一个JS文件,在HTML页面引用
<script type="text/javascript" src="js/index.js"></script>
在自定义js文件中,使用Echarts插件
- 1、获取box
var boxNode=document.getElementById("box");
- 2、初始化echarts实例:
var myChart=echarts.init(boxNode)
- 3、指定图标的配置项和数据:
var option={
…
}; //指定的图表配置项和数据可以放在 JSON 文件中
- 4、使用配置项和数据显示图表:
myChart.setOption(option);
ECharts组件:图表数据中第一层键名。
1、title:标题组件
2、xAxis:水平轴
3、yAxis:垂直轴
4、legend:图例
5、tooltip:工具提示
6、series:数据系列(数组)
7、color:颜色(数组)
简易柱形图
var boxNode=document.getElementById("box");
var myChart=echarts.init(boxNode);
var option={
"title":{ //标题组件
text:"Echarts 入门实例"
},
"tooltip":{}, //工具提示
"legend":{ //图例
data:["销量","","".....]
},
"xAxis":{ //水平轴
data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
"yAxis":{}, //垂直轴
"series":[ //数据(数组)
{
name:"销量", //与legend中的data一致
type:"bar", //bar-柱形图;pie-饼形图;line-折线图
data:[10,20,30,40,50,60],
label:{
show:true, //显示图表具体数字
position:"top" //显示位置
}
},
{},{}.....
],
"color":["","",""....] //颜色
}