Echarts折線圖的實作（完整程式碼）-js教程-PHP中文網

首頁

web前端

js教程

Echarts折線圖的實作（完整程式碼）

不言

Sep 11, 2018 pm 05:19 PM

echarts 折線圖

這篇文章帶給大家的內容是關於Echarts折線圖的實現（完整程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

<!DOCTYPE html><html><head>
    <meta name="viewport" content="width=device-width" />
    <title>Gauge</title>
    <script src="~/js/jquery-3.2.1.js"></script>
    <script src="~/js/jquery-3.2.1.min.js"></script>
    <script src="~/js/echarts.js"></script></head><body>
    <div id="mydiv" style="height:500px;width:800px;">

    </div></body></html><script type="text/javascript">
    var mychart = echarts.init(document.getElementById(&#39;mydiv&#39;));    var base = +new Date(1968, 9, 3);    var oneDay = 24 * 3600 * 1000;    var date = [];    var data = [Math.random() * 300];    for (var i = 1; i < 20000; i++) {        var now = new Date(base += oneDay);
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join(&#39;/&#39;));
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    }    var option = {
        tooltip: {
            trigger: &#39;axis&#39;,
            position: function (pt) {
                return [pt[0], &#39;10%&#39;];
            }
        },
        title: {
            left: &#39;center&#39;,
            text: &#39;大数据量面积图&#39;,
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: &#39;none&#39;
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: &#39;category&#39;,
            boundaryGap: false,
            data: date
        },
        yAxis: {
            type: &#39;value&#39;,
            boundaryGap: [0, &#39;100%&#39;]
        },
        dataZoom: [{
            type: &#39;inside&#39;,
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10,
            handleIcon: &#39;M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z&#39;,
            handleSize: &#39;80%&#39;,
            handleStyle: {
                color: &#39;#fff&#39;,
                shadowBlur: 3,
                shadowColor: &#39;rgba(0, 0, 0, 0.6)&#39;,
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
        series: [
            {
                name: &#39;模拟数据&#39;,
                type: &#39;line&#39;,
                smooth: true,
                symbol: &#39;none&#39;,
                sampling: &#39;average&#39;,
                itemStyle: {
                    normal: {
                        color: &#39;rgb(255, 70, 131)&#39;
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: &#39;rgb(255, 158, 68)&#39;
                        }, {
                            offset: 1,
                            color: &#39;rgb(255, 70, 131)&#39;
                        }])
                    }
                },
                data: data
            }
        ]
    };
    mychart.setOption(option, true);</script>

登入後複製

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7862

Java教學

1649

CakePHP 教程

1404

Laravel 教程

1300

PHP教程

1242

Related knowledge

ECharts與Java介面：如何快速實現折線圖、長條圖、圓餅圖等統計圖 Dec 17, 2023 pm 10:37 PM

ECharts和Java介面：如何快速實現折線圖、長條圖、圓餅圖等統計圖，需要具體程式碼範例隨著網路時代的到來，資料分析變得越來越重要。統計圖表是一種非常直觀而有力的展示方式，透過圖表可以更清楚地展示數據，讓人們更能理解數據的內涵和規律。在Java開發中，我們可以使用ECharts和Java介面來快速實現各種統計圖表的展示。 ECharts是一款由百度開發

如何利用php介面和ECharts產生可視化的統計圖表 Dec 18, 2023 am 11:39 AM

在今天數據視覺化變得越來越重要的背景下，許多開發者都希望能夠利用各種工具，快速產生各種圖表與報表，以便能夠更好的展示數據，幫助決策者快速做出判斷。而在此背景下，利用Php介面和ECharts函式庫可以幫助許多開發者快速產生可視化的統計圖表。本文將詳細介紹如何利用Php介面和ECharts庫產生視覺化的統計圖表。在具體實作時，我們將使用MySQL

使用ECharts和Python介面繪製儀錶板的步驟 Dec 18, 2023 am 08:40 AM

使用ECharts和Python介面繪製儀錶板的步驟，需要具體程式碼範例摘要：ECharts是一款優秀的資料視覺化工具，透過Python介面可以方便地進行資料處理和圖形繪製。本文將介紹使用ECharts和Python介面繪製儀錶板的具體步驟，並提供範例程式碼。關鍵字：ECharts、Python介面、儀錶板、資料視覺化簡介儀錶板是一種常用的資料視覺化形式，它透過

WPS表格折線圖怎麼做你真的會嗎 Mar 21, 2024 am 08:36 AM

使用wps表格進行大量的數據處理可以使我們的工作更有效率，當然，wps表格不光能處理數據，還可以根據數據制定折線圖圖表等數據，這樣查看時更佳直觀。但對於有些新手來說，不知道wps表格折線圖怎麼做，今天我就跟大家講解下製作折線圖的詳細步驟：1、先查看【折線圖的使用場景】。 2.製作方法：先選擇【資料來源-插入圖表-折線圖】點選【圖表元素-勾選趨勢線-圖表中會對應的出現一道虛線】。 3.然後在【資料來源中插入一列為平均值】使用【AVERAGE進行求平均值】下拉填充的方法【先複製貼上值-然後在下拉填充】

如何在ECharts中使用地圖熱力圖展示城市熱度 Dec 18, 2023 pm 04:00 PM

如何在ECharts中使用地圖熱力圖展示城市熱度ECharts是一款功能強大的視覺化圖表庫，它提供了各種圖表類型供開發人員使用，包括地圖熱力圖。地圖熱力圖可以用來展示城市或地區的熱度，幫助我們快速了解不同地方的熱門程度或密集程度。本文將介紹如何使用ECharts中的地圖熱力圖來展示城市熱度，並提供程式碼範例供參考。首先，我們需要一個包含地理資訊的地圖文件，EC

如何在ECharts中使用日曆圖展示時間數據 Dec 18, 2023 am 08:52 AM

如何在ECharts中使用日曆圖展示時間資料ECharts（百度開源的JavaScript圖表庫）是一種強大且易於使用的資料視覺化工具。它提供了各種圖表類型，包括折線圖、長條圖、餅圖等。而日曆圖是ECharts中一個很有特色且實用的圖表類型，它可以用來展示與時間相關的數據。本文將介紹如何在ECharts中使用日曆圖，並提供具體的程式碼範例。首先，你需要使用

PPT製作折線和長條混合圖的步驟 Mar 26, 2024 pm 09:26 PM

1.在PPT中插入資料圖，類型選擇【簇狀長條圖】。 2.輸入來源數據，只使用兩列數據，例如，第一列為月數據，第二列為月累計數據。 3.更改累計資料系列的圖表類型，點擊圖表工具下的"更改圖表類型，點擊【組合】，累計資料選擇帶有資料標記的折線圖，並勾選次座標軸。4、點擊確定後，得到了基本的組合圖形。5、添加長條圖和折線圖的數據標籤。並設置不同顏色以示區別。6、對數據圖做進一步美化，刪除不必要的元素，凸顯信息，得到最終圖表。

ECharts和golang技術指南: 創建各類統計圖表的實用秘籍 Dec 17, 2023 pm 09:56 PM

ECharts和golang技術指南:創建各類統計圖表的實用秘籍，需要具體程式碼範例導語：在現代化的資料視覺化領域，統計圖表是資料分析和視覺化的重要工具。 ECharts是一個強大的資料視覺化函式庫，而golang是一種快速，可靠且有效率的程式語言。本文將向您介紹如何使用ECharts和golang建立各種類型的統計圖表，並提供程式碼範例，幫助您掌握這項技能。準備工作

See all articles

Echarts折線圖的實作（完整程式碼）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題