前端

1.为ECharts准备一个div

<div id="main" style="Height:400px"></div>

2.引入ECharts BaiDu CDN
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
3.路径配置   
<script type="text/javascript">
 // 路径配置
require.config({
     paths: {
         echarts: 'http://echarts.baidu.com/build/dist'
      }
});
    
4.使用
    require(
        [
            'echarts',
            'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
        ],
        function (ec) {
5.基于准备好的dom,初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
6.准备数据          
            var option = {
                    title : {
                        text: '某地区蒸发量和降水量',
                        subtext: '纯属虚构'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['蒸发量','降水量']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : false,
                        animation : false,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],series : [
                            {
                                name:'蒸发量',
                                type:'bar',
                                    data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                                    markPoint : {
                                        data : [
                                            {type : 'max', name: '最大值'},
                                            {type : 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine : {
                                        data : [
                                            {type : 'average', name: '平均值'}
                                        ]
                                    }
                                },
                                {
                                    name:'降水量',
                                    type:'bar',
                                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                                    markPoint : {
                                        data : [
                                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                                        ]
                                    },
                                    markLine : {
                                        data : [
                                            {type : 'average', name : '平均值'}
                                        ]
                                    }
                                }
                            ]
                    };
            myChart.setOption(option);

7.通过ajax发送到后台           
            var data1 = myChart.getDataURL("png");
            $(function(){
                
                $('#b').click(function(){
             
                     $.ajax({
             
                         type: "POST",
             
                         url: "enterprise/image",
             
                         data: {a:data1},
             
                         success: function(data){alert(data);  }
                                  
                     });
             
                });
             
            });
            
            
        }
    );
    </script>
    <button id="b">上传</button>

后端

@RequestMapping("/imageUpload")
        public String image(String a) throws IOException{
            
                String[] url = a.split(",");
                String u = url[1];
                // Base64解码
                Base64 base64 = new Base64();  
                byte[] b = base64.decodeBase64(new String(u).getBytes());  // base64解码导入 import org.apache.commons.codec.binary.Base64;

       //maven方式导入<dependency>
                //<groupId>commons-codec</groupId>
                //<artifactId>commons-codec</artifactId>
                //<version>20041127.091804</version>
                //</dependency>  

// 生成图片此处异常抛出,可自行捕获处理
                OutputStream out = new FileOutputStream(new  File("E:\\"+System.currentTimeMillis()+".png"));
                out.write(b);
                out.flush();
                out.close();
            
                return "1";
            
        }

欢迎交流沟通,共同进步!

ECharts 上传图片Example的更多相关文章

  1. echarts 中国地图 数据自动提示

    mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...

  2. 一起来玩echarts系列(一)------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

  3. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  5. 博客使用BOS上传图片

    1.博客平台的选定 从大学开始做个人主页算起,最开始是使用html,CSSS写简单的页面,后面大学毕业之后接触到了WordPress,就开始用WordPress搭建网站.现在还维护着一个农村网站.ht ...

  6. echarts+php+mysql 绘图实例

    最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...

  7. 数据图表插件Echarts(一)

    一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...

  8. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  9. ECharts数据图表系统? 5分钟上手!

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

随机推荐

  1. JS获取浏览器高度和宽度

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  2. Python学习之路——基础2(含深浅拷贝)

    逻辑运算符:not  and  or 等同于c/c++中的 !.&&.||,除了写法上的不同,实际原理是一样的. 运算也遵循短路原则.由于Python本身不支持++/--操作符,所以避 ...

  3. GNS3的安装和配置

    一.为什么安装GNS3 简单说来它是dynamips的一个图形前端,相比直接使用dynamips这样的虚拟软件要更容易上手和更具有可操作性.更重要的一点是很多Cisco实验在cisco packet ...

  4. vue和react总结

    一.总结一下Vue和React的区别 相同点:   1.都支持服务器端渲染     2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent ...

  5. awk分隔符

    最近需要检测日志,shell中用到了awk,因为分割条件不止一个,并且包括了中括号.在此记录一下关于多分隔符并且包含中括号的情况 awk -F'[=,]|[][]+' '{print $6}'

  6. leetcode笔记(三)207. Course Schedule

    题目描述(原题目链接) There are a total of n courses you have to take, labeled from 0 to n-1. Some courses may ...

  7. ABAP术语-Connection Type

    Connection Type 原文:http://www.cnblogs.com/qiangsheng/archive/2008/01/17/1042479.html A connection ty ...

  8. windows下openresty中使用lua做接口转发、二次封装等

    需求:根据客户需求,可以在ngx下 通过lua做接口二次封装再次转发给用户或第三方 场景:对返回值有要求的.接口屏蔽字段.或做一些业务上的验证等 1.windows直接下载openresty 解压即可 ...

  9. 爬虫——BeautifulSoup4解析器

    BeautifulSoup用来解析HTML比较简单,API非常人性化,支持CSS选择器.Python标准库中的HTML解析器,也支持lxml的XML解析器. 其相较与正则而言,使用更加简单. 示例: ...

  10. VMware虚拟机下载与安装(内附密钥)

    VMware下载与安装 一.虚拟机的下载 1.进入VMware官网,点击左侧导航栏中的下载,再点击图中标记的Workstation Pro,如下图所示. 2.根据操作系统选择合适的产品,在这里以Win ...