ECharts + servlet+jsp图形

在这里插入图片描述
servlet

public void getColumnChart(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/json");
		response.setCharacterEncoding("utf-8");
		List<PW_RepertoryBright> userPowers=echartsDao.echGO();
		PrintWriter out=response.getWriter();
		out.write(ToJsonUtil.toJson(userPowers));
	}

jsp

// 基于准备好的dom,初始化echarts实例
       
         $.get("${ctx}/servlet/EchServlet?type=getColumnChart", function (d) {
         	data = d.data;
        	//console.log(data);
        	var pricesum = 0;
        	var tradesum = 0;
        	var quantitysum = 0;
        	for (i = 0; i < data.length; i++) {
        		pricesum += parseInt(data[i].price);
        		tradesum += parseInt(data[i].trade);
        		quantitysum +=data[i].quantity;
			}
        	var myChart = echarts.init(document.getElementById('main'));
        	var myChartBY2 = echarts.init(document.getElementById('mainBY2'));
        	
        	 var Luo_er2 = {
                title: { x: 'center', text: '库存调拔报表', subtext: '来自中贤', },
                tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" /*  */ },
                toolbox: { show: true, feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                grid: {  borderWidth: 0, y: 80, y2: 60 },
                //名称
                xAxis: [  {  type: 'category',  show: false, data: ['数量', '调拨价', '金额']  } ],
                yAxis: [  { type: 'value', show: false } ],
                series: [
                    {  name: '库存调拔报表', type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    // build a color map as your need.
                                    //颜色
                                    var colorList = [
                                      '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                      '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                      '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                    ];
                                    return colorList[params.dataIndex];
                                },
                                label: { show: true,  position: 'top',  formatter: '{b}\n{c}' }
                            }
                        },
                        //放入数据
                        data: [
                            { value: quantitysum, name: '数量' },
                            { value: tradesum, name: '调拨价' },
                            { value: pricesum, name: '金额' },
                        ],
                        markPoint: {
                            tooltip: {
                                trigger: 'item',
                                backgroundColor: 'rgba(0,0,0,0)',
                                formatter: function (params) {
                                    return '<img src="'
                                            + params.data.symbol.replace('image://', '')
                                            + '"/>';
                                }
                            }
                           
                        }
                    }
                ]
            };
            myChart.setOption(Luo_er2);
            )};
            
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值