jsp使用最简单的echarts图表
jsp项目中应用最简单的一个折线图、柱状图等。
一、echarts官网使用
首先打开echarts的api官方文档。
官网:https://echarts.apache.org/examples/zh/index.html
从官网中可以选择一个自己需要的图表,然后直接点击图表的名称,就可以进去看到代码对应的实例;
比如我点击的是第二个:
然后可以直接导入js包,照猫画虎即可。js包一般这种简单的echarts只需要导入下面这个即可:
下面是我的项目中的实例:
二、导入js包
因为我用的jsp、后端是soringMVC的项目,所以是直接将js包导入到项目中,然后在自己的jsp中引入即可。
三、代码书写
1、html代码块
因为,需要有一个div块(一个空间)去绘画图表,所以这里准备一个div:
<div class="ptb10" id="echartsContainer" style="width: 1400px;height: 400px"> </div>
2、js实现
//收益曲线
function LoadIncomeCurve(type) {
var param5 = {
pageNo: 1,
pageSize: 100,
type: type
}
$.ajax({
url: "/user/getIncomeCurve",
type: "POST",
data: param5,
dateType: "JSON",
success: function (ret) {
if (getCode(ret)) {
var resultList = getData(ret);
var dataList = resultList["list"];
if (!dataList.length > 0) {
var dom = $("#echartsContainer");
dom.empty();
dom.append("趋势图数据为空");
} else {
//绘画图表
loadData(dataList,type);
}
}
}
})
}
function loadData(data,type){
console.log("初始化echart"+data);
var dom = document.getElementById("echartsContainer");
var myChart = echarts.init(dom);
//绘画Y轴
var yData=[];
//绘画X轴
var xData=[];
//给X、Y轴赋值数据
for(var i=0;i<data.length;i++){
if (type == 4){
xData.push(data[i]["年"]);
}else {
xData.push(data[i]["年"] + '-' + data[i]["月"]);
}
yData.push(data[i]["金额"]);
}
//填充图表
var option = {
//X轴
xAxis: {
type: 'category',
name: '日期',
data: xData,
boundaryGap: true,
},
//Y轴
yAxis: {
type: 'value',
name: '金额',
min: '0'
},
//内容
series: [
{
name: '本金',
type: 'bar', //这个type是表示,你画的是柱状图还是折线图,下面变换演示
data: yData,
// areaStyle: {}
itemStyle:{color:'#036db5'} //设置图的颜色
}
]
};
//echarts类库实例化
myChart.setOption(option);
}
3、上面type=’'bar"时,如下图:
4、上面type=’'line"时,如下图:
5、上面type=’'line",再加一个属性areaStyle: {}时,如下图:
以上便是,简单的折线图,柱状图,使用很简单,如果想要更加复杂的,可以自己参考官网api文档,都有详细的用法。