HTML在表格中添加echarts圖表

本文轉載自查看原文 2017-07-23 19:29 5551 ECharts/ echarts

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue中添加Echarts圖表的使用，Echarts的學習筆記 html中給表格添加斜線在內網中 vue項目添加ECharts圖表插件在Html中使用echarts圖表 vue 項目添加echarts圖表 angular中如何使用echarts圖表關於ppt中嵌入echarts圖表 confluence中添加圖表 web端生成的帶有echarts圖表的html頁面，嵌入在(javaFx)webview中顯示錯位問題使用Apache POI導出echarts圖表到Excel表格