效果预览：
这里就不赘述了，之前的文章已经写了怎么使用的，直接发代码就行了，其实就是将函数加一个参数判断一下需要生成什么类型的图表，没有技术含量。
H5源码：
代码语言：javascript复制 <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源码：
代码语言：javascript复制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引用：
代码语言：javascript复制 <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>虽然一直没有什么高技术含量，但是一点点来，我觉得还是可以学会这个的，现在就当是玩玩。
