一、介绍
ECharts,一个纯 Javascript 的图表库,可以流畅的运行在PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图,柱状图,散点图,饼图,K线图,用于统计的盒形图,用于地理数据可视化的地图,热力图,线图,用于关系数据可视化的关系图,treemap,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。
echarts官网:echarts首页
二、使用
由于最近做项目开发需要使用echarts图表,所以抽出时间总结一下echarts图表的用法。
在echarts官网下载使用echarts需要的文件,单文件方式需要一个echarts.js文件,下载地址:echarts.js文件,把文件放到WebRoot下的一个目录中,引入该文件即可使用。由于有的图表需要依赖底层Canvas类库ZRender,并且要使用更丰富的功能或更多图表交互组件也需要依赖底层Canvas类库ZRender,这时需要下载echarts完整文件,下载地址:echarts-master,还需要下载ZRender完整文件,下载地址:zrender-master,然后将zrender-master改名为zrender,echarts-master名字任意,并把他们放到相同目录下,将该目录文件放到WebRoot下的一个目录中,修改配置文件,引入配置文件和esl.js文件,根据需要引入依赖的文件即可使用,具体如下。
新建一个web工程testec
准备:在testec中的WebRoot中新建一个文件夹ui,下载jquery文件放到WebRoot下的ui目录中并在jsp页面引入该文件,由于echarts图表的样式及数据的配置都在option中进行,所以所有图表的option我都抽取放到一个文件cfgopts.js中,在使用之前需要引入该文件,并获取相应图表的option即可。
1、单文件方式引入
准备:在WebRoot下的ui中新建一个文件夹echarts,将下载的echarts-master改名为echarts-3.2.3,将该文件放到echarts文件夹中,把不需要的文件删除,在jsp页面中引入echarts-3.2.3下dist中的echarts.js文件。
(1)、引入文件,在head标签中加入:
<script src="${ctx }/ui/jquery-1.7.2.min.js"></script>
<script src="${ctx }/ui/echarts/echarts-3.2.3/dist/echarts.js"></script>
<script src="${ctx }/ui/echarts/echarts-3.2.3/options/cfgopts.js"></script>
(2)、准备一个div标签:<div id="pie" style="width: 600px;height: 400px;"></div>
(3)、开始使用
<script>
var pieChart;
$(function() {
pieChart = echarts.init(document.getElementById("pie"));
showPie();
});
function showPie() {
var pieOpt = getPieOpt();
pieOpt.title.text = '饼形图';
pieOpt.series[0].name = '饼形图';
pieChart.setOption(pieOpt);
}
</script>
运行testec,在浏览器地址输入:http://localhost:8080/testec/ecjsp/testPie.jsp
运行效果: