[Javascript] 繪圖: ECharts

日期：
ECharts
http://echarts.baidu.com/

ECharts demo
https://ecomfe.github.io/echarts-examples/public/index.html

ECharts webgl demo
http://gallery.echartsjs.com/explore.html#tags=echarts-gl~sort=rank~timeframe=all~author=all

ECharts，一個使用 JavaScript 實現的開源視覺化庫，可以流暢的運行在 PC 和移動設備上，相容當前絕大部分流覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴羽量級的向量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的資料視覺化圖表。

ECharts 提供了常規的折線圖、柱狀圖、散點圖、圓形圖、K線圖，用於統計的盒形圖，用於地理資料視覺化的地圖、熱力圖、線圖，用於關係資料視覺化的關係圖、treemap、旭日圖，多維資料視覺化的平行座標，還有用於 BI 的漏斗圖，儀錶盤，並且支持圖與圖之間的混搭。


以下為vue化套件

vue-echarts
https://github.com/ecomfe/vue-echarts


以下為單html檔測試範例(Area圖)︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>ECharts Vue Demo</title>

    <!--使用vue-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

    <!--使用echarts-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.rawgit.com/ecomfe/vue-echarts/29c5ea78/dist/vue-echarts.js"></script>

</head>
<body>

    <vue-echart id="app" style="width:100%;" v-bind:options="options"></vue-echart>

    <script type="text/javascript">

        //使用Vue.component加載VueECharts
        Vue.component('vue-echart', VueECharts);

        new Vue({
            el: '#app',
            data: {
                options: {
                    title: {
                        text: '堆疊區域圖'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['郵件行銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜尋引擎']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['週一', '週二', '週三', '週四', '週五', '週六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '郵件行銷',
                            type: 'line',
                            stack: '總量',
                            areaStyle: {},
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '聯盟廣告',
                            type: 'line',
                            stack: '總量',
                            areaStyle: {},
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '視頻廣告',
                            type: 'line',
                            stack: '總量',
                            areaStyle: {},
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '直接訪問',
                            type: 'line',
                            stack: '總量',
                            areaStyle: { normal: {} },
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '搜尋引擎',
                            type: 'line',
                            stack: '總量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: { normal: {} },
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                },
            },
        });

    </script>

</body>
</html>


載入後畫面為︰


#ECharts, Javascript, vue, html5, canvas, svg, webgl, plot, chart

留言

張貼留言