Heim > Artikel > Web-Frontend > Implementierung des Echarts-Liniendiagramms (vollständiger Code)

Implementierung des Echarts-Liniendiagramms (vollständiger Code)

不言Original: 2018-09-11 17:19:432862Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Implementierung des Echarts-Liniendiagramms (vollständiger Code). Ich hoffe, dass er für Freunde in Not hilfreich ist.

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

Verwandte Empfehlungen:

Was sind Echarts? Wie benutzt man? Einführung in Echarts

Echarts-Histogramm-Farbeinstellung: Wie stelle ich verschiedene Farben für das Echarts-Histogramm ein? (Code)

Das obige ist der detaillierte Inhalt vonImplementierung des Echarts-Liniendiagramms (vollständiger Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

echarts

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie Videojs, um die Wiedergabe einer Videolistenschleife zu implementieren (vollständiger Code)Nächster Artikel：So verwenden Sie Videojs, um die Wiedergabe einer Videolistenschleife zu implementieren (vollständiger Code)

In Verbindung stehende Artikel

Mehr sehen