效果预览：
这里就不赘述了，之前的文章已经写了怎么使用的，直接发代码就行了，其实就是将函数加一个参数判断一下需要生成什么类型的图表，没有技术含量。
H5源码：
<h2>请输入对应信息</h2> <input type="text" name="" id="head" placeholder="表头" /><br /> <input type="text" placeholder="列名" id="name1"/><input type="text" placeholder="比重" id="p1"/><br /> <input type="text" placeholder="列名" id="name2"/><input type="text" placeholder="比重" id="p2"/><br /> <input type="text" placeholder="列名" id="name3"/><input type="text" placeholder="比重" id="p3"/><br /> <input type="text" placeholder="列名" id="name4"/><input type="text" placeholder="比重" id="p4"/><br /> <input type="button" name="" id="" value="点击生成柱状图" οnclick="creatEcharts(1)"/> <input type="button" name="" id="" value="点击生成扇形图" οnclick="creatEcharts(2)"/> <button οnclick="convertCanvasToImage()">下载图表为PDF</button> <div id="main" style="width: 600px;height:400px;"></div>
JS源码：
var head; var myChart; function creatEcharts(flag){ //拿数据 head = $("#head").val(); var name1 = $("#name1").val(); var name2 = $("#name2").val(); var name3 = $("#name3").val(); var name4 = $("#name4").val(); var p1 = $("#p1").val(); var p2 = $("#p2").val(); var p3 = $("#p3").val(); var p4 = $("#p4").val(); if(flag == 1){ // 基于准备好的dom，初始化echarts实例 myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: head }, tooltip: {}, legend: { data:['比重'] }, xAxis: { data: [name1,name2,name3,name4] }, yAxis: {}, series: [{ name: '比重', type: 'bar', data: [p1, p2, p3, p4] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } else if(flag == 2){ myChart; echarts.init(document.getElementById('main')).setOption({ series: { type: 'pie', data: [ {name: name1, value: p1}, {name: name2, value: p2}, {name: name3, value: p3}, {name: name4, value: p4} ] } }); } } </script> <script type="text/javascript"> function convertCanvasToImage() { html2canvas(document.getElementById('main'), { onrendered: function(canvas) { document.body.appendChild(canvas); createPDFObject(canvas.toDataURL("image/jpeg")); } }); } function createPDFObject(imgData) { var doc = new jsPDF('p', 'pt'); doc.addImage(imgData, 5, 5, 600, 300, 'img'); doc.save(''+head+'.pdf') }
JS引用：
<script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jQuery/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jspdf.js" type="text/javascript" charset="utf-8"></script>
虽然一直没有什么高技术含量，但是一点点来，我觉得还是可以学会这个的，现在就当是玩玩。
