关于echarts和ajax的简单运用

最新推荐文章于 2024-04-24 13:32:07 发布

a7512971

最新推荐文章于 2024-04-24 13:32:07 发布

阅读量3.3k

点赞数 1

分类专栏： echarts 文章标签： echarts ajax

本文链接：https://blog.csdn.net/a7512971/article/details/78081679

版权

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

然后接触了echarts和ajax的运用

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

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

代码如下：

control类：

@Controller
public 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>

展示结果:

a7512971

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
关于echarts和ajax的简单运用

最近有一个很好的机会让我去公司摸鱼。~~然后接触了echarts和ajax的运用刚开始一直没想明白后面慢慢开始了解起来。通过springmvc框架下在control类引入jacakson包对得到的泛型List转换为 json数据。传递给前台显示。代码如下：control类：@Controllerpublic class EchartsContorl
复制链接

扫一扫