1.图表数据显示：在series中添加属性
（1）柱状图上显示数据
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
}（2）雷达图上显示数据
label: {
normal: {
show: true,
formatter:function(params) {
return params.value;
}
}
},2.datazoom相关配置
dataZoom=[ //区域缩放
{
id: 'dataZoomX',
show:true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
type: 'slider', //slider表示有滑动块的，inside表示内置的
dataBackground:{ //数据阴影的样式。
lineStyle:mylineStyle, //阴影的线条样式
areaStyle:myareaStyle, //阴影的填充样式
},
fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
borderColor:"#ddd", //边框颜色。
filterMode: 'filter', //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
//'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
//'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
//'none': 不过滤数据，只改变数轴范围。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
},
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled:false, //是否停止组件的功能。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
}
]
参考地址：http://blog.csdn.net/luanpeng825485697/article/details/76739026
3.echarts事件入口
if (option && typeof option === "object") {
myChart.setOption(option);
myChart.on('click', function (params) {
/******todo********/
})
}4.把echarts图表导出成png图片（需要把动画效果关掉animation : false，与title同级）
（1）把每个图表都封装成一个方法，在方法里用getDataURL()获取图表的base64编码，传到页面表单中。
js代码：
/* 雷达图 */
function getRadar(userinfo){
var dom = document.getElementById("container_radar");
var myChart = echarts.init(dom);
/*此处省略图表内容*/
if (option && typeof option === "object") { //图表的动作
myChart.setOption(option, true);
}
var picBase64Info = myChart.getDataURL();//获取echarts图的base64编码，为png格式。
$('#radar').val(picBase64Info);//将编码赋值给输入框
}表单代码：
<form id="" method="post" action="">
<tr>
<td><input id="radar" name="radar" type="hidden"/></td>
<td><input type="submit" value="提交"/></td>
</tr>
</form>后台解析：
String radar = request.getParameter("radar");//雷达图
// 传递过程中 "+" 变为了 " "
radar = radar.replaceAll(" ", "+");
File filePath = new File("C:\\Users\\Administrator\\Desktop");
String timeStamp=new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
String radar_path =ExportPdf.decodeBase64(radar,filePath,timeStamp+"候选人分数雷达图"); // 读取图片信息，返回图片保存路径ExportPdf代码
//解密
public static String decodeBase64(String base64Info, File filePath,String name){
if(StringUtils.isEmpty(base64Info)){
return null;
}
Decoder decoder = Base64.getDecoder();
//BASE64Decoder decoder = new BASE64Decoder();
String[] arr = base64Info.split("base64,");
// 数据中：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI4AAAEsCAYAAAClh/jbAAA ... 在"base64,"之后的才是图片信息
String picPath = filePath+ "/"+ name +".png";
try {
//byte[] buffer = decoder.decodeBuffer(arr[1]);
byte[] buffer = decoder.decode(arr[1]);
OutputStream os = new FileOutputStream(picPath);
os.write(buffer);
os.close();
} catch (IOException e) {
throw new RuntimeException();
}
return picPath;
}
/**
* @Title: getBytes
* @Description: TODO(解密后生成二进制数组)
* @param @param base64Info
* @param @param filePath
* @param @return 参数
* @return String 返回类型
* @throws
*/
public static byte[] getBytes(String base64Info){
if(StringUtils.isEmpty(base64Info)){
return null;
}
Decoder decoder = Base64.getDecoder();
String[] arr = base64Info.split("base64,");
byte[] buffer = decoder.decode(arr[1]);
return buffer;
}
public static byte[] getBytesByInput(InputStream fis){
byte[] buffer = null;
try {
ByteArrayOutputStream bos = new ByteArrayOutputStream(1024);
byte[] b = new byte[1024];
int n;
while ((n = fis.read(b)) != -1) {
bos.write(b, 0, n);
}
fis.close();
bos.close();
buffer = bos.toByteArray();
} catch (Exception e) {
e.printStackTrace();
}
return buffer;
} 关于解密解析：
描述
JDK从1.8升级到9.0.1后sun.misc.BASE64Decoder和sun.misc.BASE64Encoder不可用。
原因
参看官网，发现JDK中的lib\tools.jar和JRE中的lib\rt.jar已从Java SE 9中删除。这些JAR中可用的类和资源现在以文件中的内部格式存储在lib目录的命名模块中。 可以使用称为jrt的新方案来从运行时映像检索这些类和资源。 依靠这些JAR位置的应用程序将不再工作。（http://www.oracle.com/technetwork/java/javase/9-relnote-issues-3704069.html）
解决方法
从官网发现，从JDK 1.8开始，就提供了java.util.Base64.Decoder和java.util.Base64.Encoder的JDK公共API，可代替sun.misc.BASE64Decoder和sun.misc.BASE64Encoder的JDK内部API。我把代码做了如下替换：
java.util.Base64.Decoder的官网API：https://docs.oracle.com/javase/9/docs/api/java/util/Base64.Decoder.html
java.util.Base64.Encoder的官网API：https://docs.oracle.com/javase/9/docs/api/java/util/Base64.Encoder.html
扫一扫
3677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
