echarts2.2.7动态数据填充

来源：互联网发布：天猫和淘宝哪个假货多编辑：程序博客网时间：2024/06/07 03:04

项目结构：

1.柱状图

jsp代码：

// 路径配置        require.config({            paths: {                echarts: 'echarts'            }        });                // 使用        require(            [                'echarts',                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载            ],            function (ec) {                // 基于准备好的dom，初始化echarts图表                var myChart = ec.init(document.getElementById('main'));                                  var option = {                    tooltip: {                        show: true                    },                    legend: {                        data:['销量']                    },                    xAxis : [                        {                            type : 'category',                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]                        }                    ],                    yAxis : [                        {                            type : 'value'                        }                    ],             series : [                 {                     "name":"销量",                     "type":"bar",                     "data":(function(){  var arrY=[];  $.ajax({url : "barServlet",//要提交的URL路径async : false, //同步执行  异步无法实现自动填充type : "post",      //发送请求的方式data :{},dataType : "json",    //指定传输的数据格式success : function(result) {//请求成功后要执行的代码$.each(result,function(index,item){arrY.push(item);});}});return arrY;  })()//此处多加一对()                 }             ]                };                        // 为echarts对象加载数据                 myChart.setOption(option);             }        );

后台代码

request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");List list = new ArrayList();list.add(10);list.add(5);list.add(5);list.add(8);list.add(7);list.add(3);JSONArray json = JSONArray.fromObject(list);response.getWriter().print(json);

2.饼状图

jsp代码

// 路径配置        require.config({            paths: {                echarts: 'echarts'            }        });                // 使用        require(            [                'echarts',                'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载            ],            function (ec) {                // 基于准备好的dom，初始化echarts图表                var myChart = ec.init(document.getElementById('main'));                                 option = {    title : {        text: '某站点用户访问来源',        subtext: '纯属虚构',        x:'center'    },    tooltip : {        trigger: 'item',        formatter: "{a} <br/>{b} : {c} ({d}%)"    },    legend: {        orient : 'vertical',        x : 'left',        data:(function(){            var arrY=[];  $.ajax({url : "pieServlet",//要提交的URL路径async : false, //同步执行  异步无法实现自动填充type : "post",      //发送请求的方式data :{},dataType : "json",    //指定传输的数据格式success : function(result) {//请求成功后要执行的代码$.each(result,function(index,item){arrY.push(result[index].name);});}});return arrY;             })()    },    toolbox: {        show : true,        feature : {            mark : {show: true},            dataView : {show: true, readOnly: false},            magicType : {                show: true,                 type: ['pie', 'funnel'],                option: {                    funnel: {                        x: '25%',                        width: '50%',                        funnelAlign: 'left',                        max: 1548                    }                }            },            restore : {show: true},            saveAsImage : {show: true}        }    },    calculable : true,    series : [        {            name:'访问来源',            type:'pie',            radius : '55%',            center: ['50%', '60%'],            data:(function(){            var arrY=[];  $.ajax({url : "pieServlet",//要提交的URL路径async : false, //同步执行  异步无法实现自动填充type : "post",      //发送请求的方式data :{},dataType : "json",    //指定传输的数据格式success : function(result) {//请求成功后要执行的代码$.each(result,function(index,item){arrY.push({name:result[index].name,value:result[index].value});});}});return arrY;             })()        }    ]};                        // 为echarts对象加载数据                 myChart.setOption(option);             }        );

后台代码

request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");Model m1 = new Model("直接访问",335);Model m2 = new Model("邮件营销",335);Model m3 = new Model("联盟广告",335);Model m4 = new Model("视频广告",335);Model m5 = new Model("音乐广告",335);List list = new ArrayList();list.add(m1);list.add(m2);list.add(m3);list.add(m4);list.add(m5);JSONArray json = JSONArray.fromObject(list);response.getWriter().print(json);

效果图

阅读全文

0 0