关于echarts 图标的 demo

来源：互联网发布：专业校对软件编辑：程序博客网时间：2024/05/17 09:00

eCharts个人感觉是个不错的报表插件，前几天公司需要然后我就看了下，由于本人也是菜鸟，所以我就把我做的一个关于ｅｃｈａｒｔｓ的折线图结合ｓｅｒｖｌｅｔ的一个ｄｅｍｏ放上来，给需要的人做个参考
　首先是数据的准备
　
　声明一个存放数据的　
　***public class Series {
public String name;　//数据名称
public String type;／／有默认值
public int[] data;　／／数据
public Series(String name,String type,int[] data){
this.name=name;
this.type= type;
this.data =data;
}
}

存放数据的servlet

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        //response.getWriter().append("Served at: ").append(request.getContextPath());        response.setContentType("text/html;harset=gbk");        response.setCharacterEncoding("utf-8");        System.out.println("+++++++++++++++++++++++++++");        List<Series> series = new ArrayList<Series>();        int[] i = {2,6,8,9,7};         series.add(new Series("最高值","line",i));        // series.add(new Series("最低值","line",new ArrayList<Integer>(Arrays.asList(-2,-12,10,0,20,11,-6,20))));         System.out.println(new ObjectMapper().writeValueAsString(series));         response.getWriter().println(new ObjectMapper().writeValueAsString(series));    }

页面的展示

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><script src = "echarts.min.js"></script><script type="text/javascript" src="jquery-3.0.0.min.js"></script></head><body>----特别声明 的就是 script一定要写在 div =main 的后面 不是出不来的<div id="main" style="width: 600px;height:400px;border: 1px solid red;"></div><script type="text/javascript">        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));            var tit ='莫酒店开放记录';        // 指定图表的配置项和数据        var option = {                 title: {                        text: tit                    },                    tooltip: {                        trigger: 'axis'                    },                    legend: {                        data:['邮件营销']                    },                    grid: {                        left: '10%',                        right: '4%',                        bottom: '3%',                        containLabel: true                    },                    toolbox: {                        feature: {                            saveAsImage: {}                        }                    },                    xAxis: {                        type: 'category',                        boundaryGap: false,                         data: ['一月 ','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']                    },                    yAxis: {                        type: 'value'                    },                    series: []        };/*      $.ajax({            type:'get',            url:'BarChartServlet',            success:function(data){                alert(data.name);                if(data){                    var seriess =data.data;                    for(var i =0;i<seriess.length;i++){                        option.series[i] = data.series[i];                    }                    myChart.hideLoading();                    myChart.setOption(option);                }            }        }); */        $.get("BarChartServlet",function(data,status){            alert(status);            var model  = eval("("+data+")");            for(var i =0;i<model.length;i++){                option.series[i] = model[i];            }            myChart.hideLoading();            myChart.setOption(option);        });        // 使用刚指定的配置项和数据显示图表。        //myChart.setOption(option);    </script></body></html>

这里写图片描述
就这样了这样一个最简单的动态图标就出来了

0 0