关于echarts和ajax的简单运用

来源：互联网发布：漫威英雄实力排名知乎编辑：程序博客网时间：2024/05/16 04:20

最近有一个很好的机会让我去公司摸鱼。~~

然后接触了echarts和ajax的运用

刚开始一直没想明白后面慢慢开始了解起来。

通过springmvc框架下在control类引入jacakson包对得到的泛型List转换为 json数据。传递给前台显示。

代码如下：

control类：

@Controllerpublic class EchartsContorller {    @Autowired    private EchartsService echartsService;    @RequestMapping(value = "test",produces ="text/html; charset=utf-8")    public void echartsTest(HttpServletResponse Response, HttpServletRequest Request, Model model)throws Exception    {        List<EchartsEntity> list = echartsService.getEchartsAll();        List<EchartsEntity> list1 = new ArrayList<EchartsEntity>();        for(int i=0;i<list.size();i++)        {            list1.add(i,list.get(i));        }        ObjectMapper objectMapper = new ObjectMapper();        String json = objectMapper.writeValueAsString(list1);        Response.setCharacterEncoding("UTF-8");        Response.setContentType("text/html,charset=utf-8");        Response.getWriter().print(json);    }}

前台JSP:

    <script type="text/javascript">        var names=[];        var prices=[];        var timer= null;        function clearData()        {            if(names.length!=0)names=[];            if(prices.length!=0)prices=[];        }     $(document).ready(function () {         $("#test").click(function aa() {             clearInterval(timer);             timer=setInterval(function () {                 clearData();                 $.ajax(                     {                         type:"post",                         async:true,                         url:'test.do',                         data:{},                         dataType:"json",                         scriptCharset:'utf-8',                         success:function (result) {                             if(result)                             {                                 for (var i=0;i<result.length;i++)                                 {                                     names.push(result[i].testname);                                     prices.push(result[i].price);                                 }                                 mychart.hideLoading();                                 mychart.setOption({                                     xAxis:{                                         data:names                                     },                                     series:[{                                         data:prices                                     }]                                 });                             }                         }                     }                 )             },1000);         })     })    </script></head><body><div id="main" style="width:600px;height: 400px;"></div><script type="text/javascript">    var mychart = echarts.init(document.getElementById('main'));    var option = {        title:{            text:'Echart入门'        },        tooltip:{            trigger:'axis'        },        toolbox:            {                show:true,                feature:{                    dataZoom:{                        yAxisIndex:'none'                    },                    dataView:{readOnly:false},                    magicType:{                        type:['line','bar']                    },                    restore:{},                    saveAsImage:{}                },            },        legend:{            data:['销量']        },        xAxis:{            type:'category',            data:[]        },        yAxis:{},        series:[            {                name:'价格',                type:'line',                data:[],                markPoint: {                    symbol:'pin',                    symbolSize:80                },            }        ]    };    mychart.clear();    mychart.setOption(option);    mychart.showLoading();</script>

展示结果:

阅读全文

0 0