【WEB程式】以 Apache ECharts 繪製圖表

參考資料 ----

Apache ECharts 教程

 

 

Apache Echarts 原本由百度開發並開放源碼,之後成為 Apache 的專案項目之一,所以有詳盡豐富的中文參考文檔(雖然是簡體中文)。

 

要使用 ECharts 有多種方法,老人家選擇 "通过 jsDelivr 等 CDN 引入 的方式",除了 jsDelivr 外,還有 Staticfile;直接由 CDN 引入好像成了目前的趨勢,ZingChart 現在也採用這種方式。


最簡單的範例

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/theme/vintage.js"></script>	<!-- 樣式 js -->
</head>
<body>
    <!-- 為 ECharts 準備一個具備大小(寬高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的 DOM,初始化 echarts 實體
        var myChart = echarts.init(document.getElementById('main'), 'vintage');    // 第 2 個參數 是 樣式 選項: 預設, light(內建), dark(內建), vintage, macarons, infographic, shine, roma
                                                                                   // 如果沒有 "樣式" 參數,就是預設樣式
                                                                                   // light樣式 與 預設樣式 的差異在 light 的顏色比預設更淡
                                                                                   // 若要採用不同樣式, 除了內建的 light/dark,其他樣式則上面也要引入相應的 js

        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: 'ECharts 入門範例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用剛才指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>
</body>
</html>

 


 

相關筆記 ----

【WEB程式】以 Chartjs 繪製圖表 



沒有留言:

張貼留言