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";
}
欢迎交流沟通,共同进步!
ECharts 上传图片Example的更多相关文章
- echarts 中国地图 数据自动提示
mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...
- 一起来玩echarts系列(一)------箱线图的分析与绘制
一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts
系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- 博客使用BOS上传图片
1.博客平台的选定 从大学开始做个人主页算起,最开始是使用html,CSSS写简单的页面,后面大学毕业之后接触到了WordPress,就开始用WordPress搭建网站.现在还维护着一个农村网站.ht ...
- echarts+php+mysql 绘图实例
最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表. 我使用的是echart3,相比较第二版,echar ...
- 数据图表插件Echarts(一)
一.引言 最近做一个智慧城市项目,项目中需要图表和报表进行数据分析,从网上找了很多,最后找到了百度开放的echarts,一个很强大的插件. 二.介绍 ECharts,缩写来自Enterprise Ch ...
- nodejs利用ajax实现网页无刷新上传图片
nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...
- ECharts数据图表系统? 5分钟上手!
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
随机推荐
- 【洛谷P2447】[SDOI2010]外星千足虫
外星千足虫 题目链接 首先,它一看题解就是个高斯消元 只是改成了奇偶性的判断 性质: 奇数+奇数=偶数 奇数+偶数=奇数 偶数+奇数=奇数 偶数+偶数=偶数 于是我们用1表示奇数,0表示偶数 1+1= ...
- redis的数据结构与命令
以下部分文档,摘自51cto讲师:汤小洋 redis提供五种数据类型:string,hash,list,set及zset(sorted set). Redis数据就是以key value形式来存储的 ...
- linux系统状态查看/管理相关命令
系统状态查看命令: w 查看用户 top 系统进程监控 uptime 查看某台服务器运行了多久 htop 更加先进的交互式监控工具(需要安装) iotop 监控并实时显示磁盘IO输入和输出和程序进程( ...
- [oracle]分区表学习
(一)什么是分区 所谓分区,就是将一张巨型表或巨型索引分成若干个独立的组成部分进行存储和管理,每一个相对小的,可独立管理的部分,称为分区. (二)分区的优势 提高数据可管理性.对表进行分区,数据的加载 ...
- Nacicat for Oracle 绿色版 亲测可用
参考: http://blog.csdn.net/u013107634/article/details/52741591 https://blog.csdn.net/zhengyikuangge/ar ...
- flask笔记(一)
1.第一个flask项目 # 首先你要安装flask这个模块 pip install flask # 安装好了之后,直接新建一个py文件,开始写最简单的flask项目了 from flask impo ...
- 『嗨威说』常见的C++函数模板整理(一)
开学两天,身上的职责直接变为两个班班长,三个小组组长,哇这事情估计够我忙活了,想躲都躲不掉啊,看来我还是真招人推荐各种管理职务啊,以后要是有人推荐我当经理啊领导啊该多好哈哈哈哈.记得今天奶奶生日,很开 ...
- 【TOJ 5103】Electric Fence(皮克定理)
描述 In this problem, `lattice points' in the plane are points with integer coordinates. In order to c ...
- poj_2249_Binomial Showdown
In how many ways can you choose k elements out of n elements, not taking order into account? Write a ...
- ABAP术语-Business Components
Business Components 原文:http://www.cnblogs.com/qiangsheng/archive/2007/12/26/1015254.html Group of re ...