Echarts根据需要生成对应的图表

 <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>

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')
        }

<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>