JSP使用最简单的echarts图入门

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文档，都有详细的用法。