echarts-gl 3D柱状图保存为图片,打印
echarts-gl生成的立体柱状图生成图片是平面的,但是需求是3D图并且可以打印,我们的思路是先转成图片,然后再打印,代码如下:
生成3D图
<td>图表分析</td>
<td colspan="" style="width: 500px;height:500px;margin: 0 auto;">
<div style="width: 50px;height: 50px;float: left">
<div style="width: 20px;height: 20px;margin-left:20px;background-color: #C33531;"></div>
<p>人数</p>
</div>
<div style="width: 50px;height: 50px;margin-right:500px;float: right;">
<div style="width: 20px;height: 20px;margin-left:20px;background-color: #4A235A;"></div>
<p>占比</p>
</div>
<div id="Img" style="display: none">
<img src="#" id="jlcg"/>
</div>
<div id="main" style="width: 500px;height: 400px;margin: 0 auto;"></div>
</td>
$(function(){
getData();
});
function getData() {
var pieChart = echarts.init(document.getElementById('main'));
var hours = ['90-100', '80-89', '70-79', '60-69', '<60'];
var days = ['', '', '', '', ''];
var best=$("#best").val()==undefined?0.0:$("#best").val();
var good=$("#good").val()==undefined?0.0:$("#good").val();
var midd=$("#medium").val()==undefined?0.0:$("#medium").val();
var pass=$("#pass").val()==undefined?0.0:$("#pass").val();
var fail=$("#fail").val()==undefined?0.0:$("#fail").val();
var bestRate=$("#bestRate").val()==undefined?0.0:$("#bestRate").val();
var goodRate=$("#goodRate").val()==undefined?0.0:$("#goodRate").val();
var middRate=$("#mediumRate").val()==undefined?0.0:$("#mediumRate").val();
var passRate=$("#passRate").val()==undefined?0.0:$("#passRate").val();
var failRate=$("#failRate").val()==undefined?0.0:$("#failRate").val();
var data = [[,,best],[,,good],[,,midd],[,,pass],[,,fail],
[,,bestRate],[,,goodRate],[,,middRate],[,,passRate],[,,failRate]];
var colorList=new Array();
var option = {
tooltip: { }, xAxis3D: {
type: 'category',
data: hours,
name:'分数区间'
},
yAxis3D: {
type: 'category',
data: days,
},
zAxis3D: {
type: 'value',
name:'数据'
},
grid3D: {
boxWidth: ,
boxDepth: ,
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
animation: false,
series: [{
name:"人数",
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[], item[], item[]],
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: ,
borderWidth:
}
},
itemStyle:{
normal: {
// 定制显示(按顺序)
color: function(params) {
var arr = params.data.value;
if(arr[]==){
colorList.push('#C33531');
}else{
colorList.push('#4A235A');
}
return colorList[params.dataIndex]
}
},
}
}]
}
pieChart.setOption(option);
}
生成图片
//将canvas转化成图片
var div = document.getElementById("Img");
div.style.display = "block";
var img = document.getElementById("jlcg");
img.style.width="450px";
img.style.height="350px";
var mycanvas = $("#main").find("canvas")[];
var image = mycanvas.toDataURL("image/png");
var $a = document.getElementById('jlcg').setAttribute('src',image);
注意:
如果生成出来的图片外面的div的display:none的话,在用LOdop打印预览的时候不会显示的
用js动态改变一下div的样式
echarts-gl 3D柱状图保存为图片,打印的更多相关文章
- echarts gl 3d地图,click事件失效,解决办法
问题 比如点击四川,进行下钻,需要获取点击区域的name属性,根据name进而异步获取四川的地图的json,如下图所示: echart和gl版本 Loaded claygl, version 1.2. ...
- echart.gl.js实现动态3D柱状图
echart.gl.js实现动态3D柱状图 一.总结 一句话总结:演示页面的源代码里面一定有所需的所有的js. 二.[js实践篇]——echart.gl.js实现动态3D柱状图 前言 本公司的项目需求 ...
- ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法
记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部 ...
- OpenGL中的深度、深度缓存、深度测试及保存成图片
1.深度 所谓深度,就是在openGL坐标系中,像素点Z坐标距离摄像机的距离.摄像机可能放在坐标系的任何位置,那么,就不能简单的说Z数值越大或越小,就是越靠近摄像机. 2.深度缓冲区 深度缓冲区原理就 ...
- Delphi RichEdit的内容保存为图片
uses RichEdit; {将RichEdit1的内容保存为图片,此函数也适合于RxRichEdit,即RichEdit: TRxRichEdit}procedure RichEditToCanv ...
- 如何把Excel中的单元格等对象保存成图片
对于Excel中的很多对象,比如单元格(Cell),图形(shape),图表(chart)等等,有时需要将它们保存成一张图片.就像截图一样. 最近做一个Excel相关的项目,项目中遇到一个很变态的需求 ...
- C# 创建EXCEL图表并保存为图片
数据表格能够清晰的呈现数据信息,但是我们对于一些繁杂多变的数据想要很直观的看到数据变化走势或者数据的占比时,数据图表会更具代表性,并且在呈现数据信息上也更形象,也能获取更多纯数字信息所不能直接展现的信 ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- 用MVVM模式开发中遇到的零散问题总结(5)——将动态加载的可视元素保存为图片的控件,Binding刷新的时机
原文:用MVVM模式开发中遇到的零散问题总结(5)--将动态加载的可视元素保存为图片的控件,Binding刷新的时机 在项目开发中经常会遇到这样一种情况,就是需要将用户填写的信息排版到一张表单中,供打 ...
随机推荐
- 一个WebLoad 脚本范例
//initial the Agenda function InitAgenda(){ wlGlobals.SaveHeaders = true; wlGlobals.SaveSour ...
- [luoguP1010] 幂次方 ^(* ̄(oo) ̄)^
传送门 递归.. 代码 #include <cstdio> int n; int bit[15]; inline void solve(int x) { int i, f = 0; if( ...
- hdu 1166 树状数组模板题
#include<stdio.h> #include<string.h> #define N 51000 int c[N],n; int number(int x) { r ...
- Elasticsearch5.6搭建及拼音中文混合搜索实现
https://blog.csdn.net/UUfFO/article/details/78154499
- Parent and son
Give you a tree with N vertices and N‐ 1 edges, and then ask you Q queries on “which vertex is Y's s ...
- Hive之Order,Sort,Cluster and Distribute By
测试数据 create table sort_test( id int, name string ) row format delimited fields terminated by '\t' li ...
- 又见古老的Typosquatting攻击:这次入侵Npm窃取开发者身份凭证
有些攻击方式虽然听起来很幼稚,但有时候却也可以生效,比如typosquatting攻击——我们上次看到这种攻击是在去年6月份,这本身也是种很古老的攻击方式. 所谓的typosquatting,主要是通 ...
- NYOJ 298-点的变换(经典矩阵解决点平移、缩放、翻转和旋转)
题目地址:NYOJ 298 思路:该题假设用对每一个点模拟的操作.时间复杂度为O(n+m),结果肯定超时.然而利用矩阵乘法能够在O(m)的时间内把全部的操作合并为一个矩阵,然后每一个点与该矩阵相乘能够 ...
- 【C语言】推断一个数是否为2的n次方
//推断一个数是否为2的n次方 #include <stdio.h> int is_two_n(int num) { if ((num&(num - 1))) //去掉一个1,推断 ...
- python 【目录】
python[目录] python[第一篇]初识python python[第二篇]python基本数据类型 python[第三篇]python函数基础