標籤：資料 ack nba top 配置 name tab blog images
在HTML的table中，只要將需要插入echarts圖表的格子設定為明確的寬高（不能為百分比），並賦予一個id，就可以插入echarts圖表。
如樣本所示：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script></head><body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td style="weight:300px; height: 200px">row 1, col 1</td> <td id="mainBar", style="weight:400px; height: 200px">row 1, col 2</td> </tr> <tr> <td style="weight:300px; height: 200px">row 2, col 1</td> <td id="mainLine", style="weight:400px; height: 200px">row 2, col 2</td> </tr> </table> <script type="text/javascript"> // 基於準備好的dom，初始化echarts執行個體 var myChart = echarts.init(document.getElementById(‘mainBar‘)); var option = { xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: ‘銷量‘, type: ‘bar‘, data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> <script type="text/javascript"> // 基於準備好的dom，初始化echarts執行個體 var myChart = echarts.init(document.getElementById(‘mainLine‘)); var option = { xAxis: { data: [], }, yAxis: {}, series: [{ name: ‘銷量‘, type: ‘line‘, data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body></html>
HTML在表格中添加echarts圖表
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
