一、学习百度图表插件ECharts
百度图表官方域名为:http://echarts.baidu.com
。可以从该网站上下载百度图表的js文件,该文件的文件名为:echarts.js
在使用百度图表的HTML文档中加载下载的echarts.js文件:
<script type="text/javascript" src="js/echarts.js"></script>
首先需要在HTML文档中创建一个容器,并利用CSS技术为该容器设置宽度和高度。
<div id="main"></div>
#main{
width:600px; height:500px; //宽度和高度可以根据需要任意设置
border:solid 1px #666666;
}
在HTML文档中家在一个自定义js文件,并放置在<script></acript>
标记对的末尾:
<script type="text/javascript" src="js/index.js"></script>
在自定义js文件中,使用ECharts插件,需要采用下列步骤:
1、获取盛放图表的div容器:
var mainNode=document.getElementById("main");
2、初始化echarts实例:
var myChart=echarts.init(mainNode);
3、指定图标的配置项和数据:
var option={
…
}; //指定的图表配置项和数据可以放在 JSON 文件中
4、使用配置项和数据显示图表:
myChart.setOption(option);
如果想制作出符合自身要求的图表,需要指定图表的配置项和数据。图标的配置项和数据是一个JSON数据,可以存储在一个独立的JSON文件中,并按照百度图表的规定书写这个JSON文件。
二、制作第一个简易柱状图
下面为大家展示一个制作好的柱状图的配置项和数据:
var option={
"title":{ //标题组件
"text":"ECharts 入门实例"
},
"tooltip":{}, //工具提示
"legend":{ //图例
"data":["销量"]
},
"xAxis":{ //水平轴
"data":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
"yAxis":{}, //垂直轴(必须要写)
"series":[{ //数据系列(数组)
"name":"销量",
"type":"bar",
"data":[10,20,30,100,30,15]
}],
"color":["#ff5857"] //颜色(数组)
}
上述代码定义了一个 JSON 数据,该 JSON 数据的第一级键名被 ECharts 称为“组件”。
title 是图表的标题组件;t
ooltip 是图表的提示框组件,也叫作“气泡”组件;
legend 是图表的图例组件;
xAxis 是图表的平面直角坐标系的 x 轴组件;
yAxis 是图表的平面直角坐标系的 y 轴组件;
series 是图表的数据系列组件;
color 是图表的调色盘组件。
ECharts 的各个组件包含更多的键名选项,可以控制每一个组件的功能和样式,是 ECharts 图表插件的核心内容。
将上述代码书写在一个独立的 JSON 文件中,再配合上一节中创建的 index.js 文件、样式文件、HTML文件就可以制作出一个简单的柱状图。