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邮箱登陆入口在哪里

7549

CakePHP 教程

1382

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

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

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题