Echart 具体参考：

https://echarts.apache.org/examples/zh/editor.html?c=line-stack

https://echarts.apache.org/zh/download.html

.tips {
	position: absolute;
	left: -145px;
	top: 20px;
	z-index: 9999;
	// display: none;
	.tips-box {
		.clearfix();
		position: relative;
		.tips-arrow {
			position: absolute;
		    display: block;
		    left: 145px;
		    top: 0;
		    width: 0;
		    height: 0;
		    background: #fff;
		    border: 5px solid #fff;
		    -webkit-transform: rotate(45deg);
		    transform: rotate(45deg);  
			box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
		}
		.tips-content {
			position: absolute;
			left: 0;
			top: 5px;
			width: 260px;
			padding: 0px 15px;
			background: #fff;
			border-radius: 3px;
			box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.2);
			p {
				margin: 15px auto;
				color: #666;
				._f(n,12px,20px);
				em {
					color: #333;
					font-weight: bold;
				}
			}
			.tips-arrow {
				box-shadow: none;
				top: -5px;
			}
		}		
	}
}

参考文档：

https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=&lang=zh_CN

https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316518&token=&lang=zh_CN

// 替换或追加参数
// orgUrl 地址
// paramName 参数名
// replaceWith 参数值
var replaceParamVal = function(orgUrl,paramName,replaceWith){
    var reg = new RegExp('('+ paramName +'=)([^&]*)','gi'),
        has = orgUrl.indexOf(paramName);
        if(has<=0){ 
            // 不存在改参数
            var hasQuestion = orgUrl.indexOf("?");
            if(hasQuestion>0){
              orgUrl = orgUrl+"&" +(paramName +'=' +replaceWith);
            }else{
              orgUrl = orgUrl+"?" +(paramName +'=' +replaceWith);
            }
        }else{
            // 存在该参数
            orgUrl = orgUrl.replace(reg,paramName+'='+replaceWith);
        }   
    return orgUrl; 
};

// 图片上传
$("#imghand").on('change',function(e) {
	var me = $(this).parent();
    var handId = $(this).attr("id");
    var files = e.target.files;
    files && upLoadMethod(files,handId,me)
})

function upLoadMethod(file, domId, box) {
	if(!file[0]){
		return false;
	}
    var formData = new FormData();
    formData.append('file', file[0]);
    t.http({
    	cache: false, //上传文件不需要缓存
        type: "POST",
        url: "",
        data: formData,
        dataType:"json",
        timeout:1000*5,
        contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
        processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
        success: function (ret) {
        	// 略……
        },
        error: function (err) {

        }
    });
}

使用案例代码，请在上方下载

<form>
  <table>
    <thead>
      <tr>
        <th><label><input type="checkbox" data-toggle="checkall"></label></th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td><input type="checkbox" name="" value=""></td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        ....
      </tbody>
  </table>
</form>

// 读取图片函数
var readImgFileUrl = function (me, option) {
    var defaultOption = {
        // 开始读取图片
        loadStart: function (e) {
        },
        // 读取完成
        complete: function (r) {
        },
        // 读取出错
        error: function (e) {
        }
    }
    var opts = $.extend(defaultOption, option);
    // 读取图片数据 并传入回调
    var imgObject;
    if (!me.files.length) {
        return;
    } else {
        if (me.files[0].type == 'image/jpeg' || me.files[0].type == 'image/jpg' || me.files[0].type == 'image/png') {
            imgObject = me.files[0];
        } else {
            alert("此图片格式不正确！");
            return;
        }
    }
    // 图片的正准方向
    // var orientation;

    // EXIF js 可以读取图片的元信息  https://github.com/exif-js/exif-js
    // EXIF.getData(imgObject,function(){
    //     orientation = EXIF.getTag(this,'Orientation');
    // });

    // HTML5 用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据
    var fileReader = new FileReader();
    // 开始读取
    fileReader.onprogress = function (e) {
        // 开始读取
        console.log((e.loaded / e.total * 100).toFixed() + "%");
    };
    // 读取完成
    fileReader.onload = function (e) {
        //这里可以使用校正后的图片data了
        opts.complete(data);
    };
    // 读取出错
    fileReader.onerror = function (e) {
        // alert("图片加载失败");
        opts.error(this, e);
    };
    // 读取文件内容
    fileReader.readAsDataURL(imgObject);
    // 开始加载的回调函数
    opts.loadStart.call(fileReader, imgObject);
}

HTML2canvas 生成图片：（下面使用方式源码）

http://html2canvas.hertzen.com/

https://github.com/niklasvh/html2canvas

JSzip 依赖 下载图片文件包：（下载压缩包源码）

https://stuk.github.io/jszip/

https://stuk.github.io/jszip/documentation/examples/download-zip-file.html