Echarts根据需要生成对应的图表_输入一定参数生成echarts图表

效果预览：

这里就不赘述了，之前的文章已经写了怎么使用的，直接发代码就行了，其实就是将函数加一个参数判断一下需要生成什么类型的图表，没有技术含量。

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>

虽然一直没有什么高技术含量，但是一点点来，我觉得还是可以学会这个的，现在就当是玩玩。