說實話一直想做一個可以生成圖表的檔案，但是一直研究不明白，曾經也看過很多的類似技術的檔案，D3.js，Hcharts，Echarts都看過，但是看不下去，一個是api寫的很死板，一個是自己事情比較多，今天不是很忙，簡單的看了一下，寫一個簡單的生成圖表，很簡單，沒有什麼技術含量， 只是為了拋磚引玉，我寫的只是稍微改了一點官方的例子，誰用的比較厲害的，是echarts的高階玩家的，可以教我一下，一定虛心學習！謝謝了！

效果預覽：

ok效果就是這樣，其實程式碼不用寫，估計很多人就已經想到的差不多了，還是貼出來，寫法很無腦，獲取表格資料和生成的過程都是很繁瑣的辦法，不是沒有簡單的寫法，只是我沒太多時間，就直接最無腦的寫了出來。

CSS：

h2{margin-left: 1rem;}
  input{width: 10rem;height: 1.5rem;margin-left: 1rem;margin-top: 1rem;}
    button{width: 10rem;height: 1.5rem;margin-left: 1rem;margin-top: 1rem;}
   div{margin-top: 2rem;}

H5程式碼：

 <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="點選生成" onclick="creatEcharts()"/>
    <div id="main" style="width: 600px;height:400px;"></div>

JS程式碼：

function creatEcharts(){
           //拿資料
          var head = $(<span class="hljs-string">"#head"</span>).val();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    		<span class="hljs-keyword">var</span> name1 = $("#name1").val();  
           var name2 = $(<span class="hljs-string">"#name2"</span>).val();  </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    		<span class="hljs-keyword">var</span> name3 = $("#name3").val();  
          var name4 = $(<span class="hljs-string">"#name4"</span>).val(); </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    		<span class="hljs-keyword">var</span> p1 = $("#p1").val();  
         var p2 = $(<span class="hljs-string">"#p2"</span>).val();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    		<span class="hljs-keyword">var</span> p3 = $("#p3").val();  
           var p4 = $("#p4").val();  
          // 基於準備好的dom，初始化echarts例項
        var 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);
       }

裡面用到是jQuery+echarts.js，這兩個檔案的很好下載的，但是echarts.js需要去官網下載，我找好的，點選開啟連結

ok，喜歡的可以關注，哪裡不明白也可以直接留言，我看到的都會回覆的。

相互學習！