ECharts动态加载数据（简单）

常规

html

//html中的内容很简单<div id="main" style="width: 600px;height:400px;"></div>

js库导入

//导入相关脚本<script type="text/javascript" src="script/echarts.simple.min.js"></script>

js

//基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));$.post("JsonTest",{},function(json){    myChart.setOption({        tooltip:{            trigger:'axis',        },        legend: {            data:['排名']        },        xAxis: {            position:'top',            data: ["第一学期","第二学期","第三学期","第四学期","第五学期","第六学期","第七学期","第八学期"],            axisTick:{                show:true,                interval:0,                alignWithLabel:true,            },            axisLabel:{                interval:0,            }        },        yAxis: {            name:'名次',            nameLocation:'middle',            nameGap:30,            inverse:true,        },        series: [{            name: '排名',            type: 'line',            //这个数组是具体的数据值            data: json.data,            itemStyle : { normal: {label : {show: true}}},        }]    });},"json");

后台数据

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {    //返回的数据    int [] arr = {1,2,3,4,5,6,7,8};    //JSON对象    JSONObject obj = new JSONObject();    obj.element("data", arr);    //输出    response.getWriter().write(obj.toString());}

注意

自己在实际操作中调试了很久，最后发现要在ajax的调用中制定返回数据是json，特别在此说出来

$.post("JsonTest",{},function(json){……});

上面这个代码一直调试不通

alert(json.data)

这段代码执行后，显示一直是undefined，经过修改

$.post("JsonTest",{},function(json){……},"json");

则可以成功运行

效果

扩展

这个库是百度的图表库，可以方便的进行图表制作
Echarts项目链接
API手册