最近用Echarts的折线图做了一份报表,在使用过程中遇到了一些小麻烦,在这边总结下,js如下:
//iuput_echart_div是用来放图表的div,echarts是echarts.min.js中的参数(记得首先导入echarts.min.js,这个是echarts的js文件)
myChart = echarts.init(document.getElementById('iuput_echart_div'));
title="代码"
option = {
legend: {
data:[title]
},
toolbox: {
show : true,
feature : {
magicType : {show: true, type: ['line', 'bar']},
}
},
calculable : true,
tooltip : {
trigger: 'axis',
formatter: "Temperature : <br/>{b} : {c}"
},
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value}'
},
name : '货量/票',
nameLocation:'middle',
nameGap : 100
}
],
xAxis : [
{
type : 'category',
axisLine : {onZero: false},
axisLabel : {
formatter: '{value} '
},
boundaryGap : false,
data : timeList,
name : '时间',
nameLocation:'middle',
nameGap : 40
}
],
grid: {
x: 120
},
series : [
{
name:title,
type:'line',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:operList
}
]
};
//以下代码是将echart显示出来
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
效果图如下:
关于这段代码,有几点说明:
1、title这个就不用多说了,是这个折线图的标题
2、toolbox:这个是用来显示折线图的工具栏的,就是这个,现在只显示了两个,其实有好几个,具体的可以参照Echarts官网上的例子
3、yAxis : 这个是用来设置y轴的相关属性的,其中name(设置这个y轴的名称), nameLocation(设置y轴名称的显示位置,有三种形式,start,end,middle,现在显示的是middle形式),nameGap (这个属性是用来设置name与y轴距离,设置小了会使得name跟坐标上的数字重合)。xAxis跟yAxis相同
4、grip:这其实是个很有用的属性,他用来限定整张图表的边界,我现在用过4个参数,分别是x,y,x1,y1。x表示图表的左边框距离y轴x距离(把整张图表当成一张图片,这个图片的最左边与y轴的距离就是这个值。意义在于如果你这个值设置的小了,y轴左侧需要显示的内容就可能显示不全,就相当于显示的内容跑到图片外去了)。其他三个属性是设置另外三个方向的。
5、这张图表中的data(图表显示的数据)都是List,即在java后端将数据整合成List集合然后传到前端来就可以了
以上是我在使用过程中的一些心得,欢迎大家补充!