ECharts 上傳圖片Example

前端

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";
            
        }

歡迎交流溝通，共同進步！