echarts使用心得
前段时间,参与的web工程中,需要使用动态图表显示,于是在网上看到了一款很炫酷的插件Echarts,效果蛮好。下面总结下使用心得:
- 最终效果图
- 这里先展示下最后的成果
- 图1
- 图2
- 大概就是这个样子。
- 前端jsp页面
- 对于静态页面(即图表中填充的数据是写在jsp页面,而不是从后台数据库中读取),处理起来比较简单:1、定义一个div,这个div需要设置宽度大小,不然在页面上不会显示出来。2、初始化echarts。3、定义一个option,这个是核心,需要什么样式什么图形,都是在这里修改,图表中的数据也是在这里填充。4、加载echarts。
简单例子
简单的静态图表例子
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="height:400px;" ></div>
<!-- ECharts单文件引入 -->
<!--这个src需要根据echarts.js的具体路径填写-->
<script src="${pageContext.request.contextPath}/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
//这个main为上面定义的div的id值。
var option = {
title : {
text: '此处输入标题',
subtext: '此处输入子标题'
},
tooltip: {
show: true
},
legend: {
data:['销量','价格']
},
xAxis : [//x轴一般用于显示分类。
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [//y轴一般用于显示数据。
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
//静态页面直接在"data"这里填写数据。
},
{
"name":"价格",
"type":"bar",
"barWidth":30,
"data":[15, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>