28-Vue之ECharts-折线图

news2024/11/16 15:45:08

ECharts-折线图

      • 前言
      • 折线图特点
      • 折线图实现步骤
      • 折线图常见效果
        • 标记
        • 线条控制
        • 填充风格
        • 紧挨边缘
        • 缩放, 脱离0值比例
        • 堆叠图

前言

  • 本篇来学习下折线图的实现

折线图特点

  • 折线图更多的使用来呈现数据随时间的变化趋势

折线图实现步骤

  1. ECharts 最基本的代码结构
  2. 准备x轴的数据
  3. 准备 y 轴的数据
  4. 准备 option , 将 series 中的 type 的值设置为: bar
  • 完整代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts-折线图</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    // 2.准备x轴数据
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '球球']
    // 3. 准备y轴数据
    var yDataArr = [88, 92, 63, 77, 94, 80, 72]
    // 4. 准备配置项
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                type: 'bar',
                data: yDataArr
            }
        ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>
  • 效果
    在这里插入图片描述

折线图常见效果

标记

  • markPoint：最大值/最小值
 markPoint: {
        data: [
              {
                  type: 'max',
                  name: '最大值'
              }, {
                  type: 'min',
                  name: '最小值'
              }
          ]
      }

在这里插入图片描述

  • markLine：平均值
 markLine: {
        data: [
         {
            type: 'average',
            name: '平均值'
         }
       ]
     }

在这里插入图片描述

  • markArea：标注区间
markArea: { // 标注区间
      data: [
              [{xAxis: '2月'}, {xAxis: '3月'}],
              [{xAxis: '8月'}, {xAxis: '9月'}]
          ]
      }

线条控制

  • smooth：平滑线条
 var option = {
  series: [
   {
      ......
	smooth: true  // 平滑线条
   }
 ]
}

在这里插入图片描述

  • lineStyle：线条样式
var option = {
  series: [
   {
      ......
      lineStyle: {
        color: 'green',   // 线条颜色
        type: 'dashed'   //可选值还有 dotted:虚线  solid：实线
     }
   }
 ]
}

在这里插入图片描述

填充风格

  • areaStyle：填充风格
var option = {
  series: [
   {
      type: 'line',
      data: yDataArr,
      areaStyle: {
        color: 'pink'
     }
   }
 ]
}

在这里插入图片描述

紧挨边缘

  • boundaryGap：是设置给 x 轴的, 让起点从 x 轴的0坐标开始
var option = {
  xAxis: {
    type: 'category',
    data: xDataArr,
    boundaryGap: false //  让起点从 x 轴的0坐标开始
 }
}

在这里插入图片描述

  • 完整代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts-折线图</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    // 2.准备x轴数据
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
        '10月', '11月', '12月']
    // 3. 准备y轴数据
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800,
        600]
    var yDataArr1 = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005,
        3004, 3001, 3009] // 此时y轴的数据都在3000附近, 每个数之间相差不多
    // 4. 准备配置项
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr,
            boundaryGap: false  //  让起点从 x 轴的0坐标开始
        },
        yAxis: {
            type: 'value',
            scale: true  //  让其摆脱0值比例
        },
        series: [
            {
                type: 'line',
                data: yDataArr,
                scale: true,
                markPoint: {  // 最大值、最小值
                    data: [
                        {
                            type: 'max',
                            name: '最大值'
                        }, {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: { // 平均值
                    data: [
                        {
                            type: 'average',
                            name: '平均值'
                        }
                    ]
                },
                markArea: { // 标注区间
                    data: [
                        [{xAxis: '2月'}, {xAxis: '3月'}],
                        [{xAxis: '8月'}, {xAxis: '9月'}]
                    ]
                },
                smooth: true,  // 平滑线条
                lineStyle: {
                    color: 'green',  // 线条颜色
                    type: 'dashed' // 可选值还有 dotted:虚线  solid：实线
                },
                areaStyle: {  // 填充风格
                    color: 'pink'
                }
            }
        ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>

缩放, 脱离0值比例

  • 如果每一组数据之间相差较少, 且都比0大很多, 那么有可能会出现这种情况
  • scale :应该配置给 y 轴
var option = {
  yAxis: {
    type: 'value',
    scale: true
 }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts-折线图</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    // 2.准备x轴数据
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
        '10月', '11月', '12月']
    // 3. 准备y轴数据
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800,
        600]
    var yDataArr1 = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005,
        3004, 3001, 3009] // 此时y轴的数据都在3000附近, 每个数之间相差不多
    // 4. 准备配置项
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr,
            boundaryGap: false  //  让起点从 x 轴的0坐标开始
        },
        yAxis: {
            type: 'value',
            scale: true  //  让其摆脱0值比例
        },
        series: [
            {
                type: 'line',
                data: yDataArr1,
                smooth: true,  // 平滑线条
            }
        ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>
  • 效果
    在这里插入图片描述

堆叠图

  • 堆叠图指的是, 同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上
    相加
var option = {
  series: [
   {
      type: 'line',
      data: yDataArr1,
      stack: 'all'  // series中的每一个对象配置相同的stack值, 这个all替换为任意值

   },
   {
      type: 'line',
      data: yDataArr2,
      stack: 'all' // 与上面保持一致即可
   }
 ]
}
  • 效果
    在这里插入图片描述
  • 完整代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts-折线图</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
    var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
    //  准备配置项
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value',
            scale: true
        },
        series: [
            {
                type: 'line',
                data: yDataArr1,
                stack: 'all', // series中的每一个对象配置相同的stack值, 这个值可以任意写
                areaStyle: {  // 填充风格
                    color: 'pink'
                }
            },
            {
                type: 'line',
                data: yDataArr2,
                stack: 'all',  // 与上面的保持一致
                areaStyle: {
                    color: 'blue'
                }
            }
        ]
    }
    myCharts.setOption(option)
    // 将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/83173.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

高级网络应用复习——三层和生成树实验 加 命令

高级网络应用复习——三层和生成树实验 加 命令

作者简介&#xff1a;一名在校云计算网络运维学生、每天分享网络运维的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.实验 1. 实验要求 2.实验命令 三层配置 和三层交换机连接…
阅读更多...
双十二有哪些高性价比的电容笔？十大电容笔知名品牌

双十二有哪些高性价比的电容笔？十大电容笔知名品牌

任何东西都有它独特的意义、存在和作用。随着ipad的影响力越来越大&#xff0c;ipad的用户数量也越来越多&#xff0c;所以要提高ipad的性能&#xff0c;就需要一款合适的电容笔。那么&#xff0c;电容笔该选择哪个品牌&#xff1f;我将向大家推荐几款性价比高的电容笔&#xf…
阅读更多...
PPa-HA/NH2/NHS/MAL焦脱镁叶绿酸-a修饰叶酸/氨基/活性酯/马来酰亚胺的反应

PPa-HA/NH2/NHS/MAL焦脱镁叶绿酸-a修饰叶酸/氨基/活性酯/马来酰亚胺的反应

小编下面给大家分享的科研内容是类PPa-HA/NH2/NHS/MAL焦脱镁叶绿酸-a修饰叶酸/氨基/活性酯/马来酰亚胺的反应&#xff0c;和小编一起来看看&#xff01; PPa-HA焦脱镁叶绿酸-a修饰叶酸的反应&#xff1a; 以脱镁叶绿酸-a甲酯为起始原料,在二氯甲烷中于不同温度下与N-溴代丁二酰…
阅读更多...
ChatGPT面试阿里P6测试开发岗能过吗？

ChatGPT面试阿里P6测试开发岗能过吗？

最近ChatGPT爆火&#xff0c;ChatGPT能干什么呢&#xff1f;想必已经看过很多文章了&#xff0c;例如ChatGPT通过美国高考、ChatGPT开发游戏、调试代码、写文章等等。 哈哈&#xff0c;作为一个软件测试博主&#xff0c;我怎么可能不出来搞点事情呢&#xff1f;突发奇想&#…
阅读更多...
SpringBoot集成Swagger3接口文档及添加Authorization授权

SpringBoot集成Swagger3接口文档及添加Authorization授权

swagger可以为前端提供接口文档及接口测试功能&#xff0c;后端集成起来很方便&#xff0c;对代码也没有入侵&#xff0c;全注解完成&#xff0c;非常好用。 一、集成基础功能 第一步、添加依赖 <!-- swagger3 --><dependency><groupId>io.springfox</g…
阅读更多...
28845-97-8，Ac-K-DAla-DAla-OH

28845-97-8，Ac-K-DAla-DAla-OH

Ac-Lys-D-Ala-D-Ala was tested as substrate in a substrate specificity study of the Streptomyces albus DD-carboxypeptidase. 以Ac-Lys-D-Ala-D-Ala为底物&#xff0c;对albus链霉菌dd -羧肽酶进行底物特异性研究。 编号: 172467中文名称: 三肽D丙氨酸羧肽酶底物CAS号: 2…
阅读更多...
块交织器5×5 verilog设计及仿真实现

块交织器5×5 verilog设计及仿真实现

设计题目要求： 本设计基于verilog语言实现，在quartus II下仿真实现： 仿真如下： 全部代码如下： library ieee; use ieee.std_logic_arith.all; use ieee.std_logic_1164.all; use ieee.std_logic_unsigned.all; entity decoder is --实体说明 port(datain,clk,clr:IN…
阅读更多...
汽车轻量化 | 某SUV车型白车身的轻量化分析案例

汽车轻量化 | 某SUV车型白车身的轻量化分析案例

作者 | 王山 仿真秀科普作者 导读&#xff1a;轻量化是当今各整车厂在产品开发中无法回避的问题。当考虑到成本与工艺方面时&#xff0c;更是不容易解决的问题。对于高端车型&#xff0c;其较高的设计与生产成本允许其采用先进的轻量化设计与生产工艺&#xff0c;如碳纤维复合…
阅读更多...
函数：先序输出叶结点

函数：先序输出叶结点

问题引入 【问题描述】按照先序遍历的顺序输出给定二叉树的叶结点。 【输入形式】以字符形式输入二叉树的结点序列 输入的字符序列为&#xff1a;ABC##DE#G##F### 【输出形式】输出二叉树中叶子结点的先序序列 【样例输入】 ABC##DE#G##F### 【样例输出】 CGF 【输出形式】输出…
阅读更多...
分布式操作系统 - 8.分布式容错管理

分布式操作系统 - 8.分布式容错管理

文章目录1.容错性概述1.1 基本概念1.2 失效&#xff08;失败&#xff09;类型1.3 失效&#xff08;失败&#xff09;模型&#xff08;halting failure&#xff09;1.4 基于冗余的失效屏蔽技术&#xff08;1&#xff09;冗余类型&#xff08;2&#xff09;三模冗余方法&#xff…
阅读更多...
java计算机毕业设计ssm影院售票系统6fg71（附源码、数据库）

java计算机毕业设计ssm影院售票系统6fg71（附源码、数据库）

java计算机毕业设计ssm影院售票系统6fg71&#xff08;附源码、数据库&#xff09; 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。…
阅读更多...
国外Essay写作实用型技巧怎么学习？

国外Essay写作实用型技巧怎么学习？

在国外大学的学习期间&#xff0c;想必留学生对Essay是非常熟悉的&#xff0c;因为这是我们无法逃避的作业类型之一。当然&#xff0c;印象最深刻的还是大家刚开始写作Essay的时候&#xff0c;那时候真的是苦不堪言。下面就给大家分享一些Essay写作的实用型技巧&#xff0c;希望…
阅读更多...
技术分享 | 无root权限也能高效搭建ClickHouse集群？

技术分享 | 无root权限也能高效搭建ClickHouse集群？

本文来自于擎创资深数据库工程师------禹鼎侯 写在前面&#xff1a; 本次技术分享主要介绍ClickHouse集群的tgz方式无root部署的实现思路&#xff0c;以及使用ckman如何快速地不用root权限搭建clickhouse集群。文章较长&#xff0c;干货很多&#xff0c;建议先收藏点赞以防丢失…
阅读更多...
wireshark提取RTSP over TCP中的视频流

wireshark提取RTSP over TCP中的视频流

wireshark提取RTSP over TCP中的视频流 文章目录wireshark提取RTSP over TCP中的视频流1 背景2 提取前准备3 H264提取步骤4 后记1 背景 前面文章中介绍了rtp中提取H264或者H265视频的方式&#xff0c;其适用于基于RTP over UDP的方式&#xff0c;因为UDP方式&#xff0c;视频流…
阅读更多...
ip 地址分类说明

ip 地址分类说明

1,IP地址简介 前面我们已经了解了TCP/IP协议的网络层的相关协议&#xff0c;并且已经在OSI参考模型中了解到每一个协议栈的网络层都有网络层地址&#xff0c;TCP/IP协议也不例外。本节重点介绍TCP/IP协议栈的网络层地址------IP地址。IP地址是进行复杂的子网规划的基础。 我们前…
阅读更多...
ubuntu 18.04 crontab 设置自动开关机

ubuntu 18.04 crontab 设置自动开关机

Ubuntu 使用 Cron 实现计划任务 - 知乎 1、切换root su root 2、安装并启动 cron apt install cron 若已经安装&#xff0c;输入以下命令判断 cron 服务是否启动&#xff1a;pgrep cron。如果有 pid &#xff08;一串数字&#xff09;输出则说明 cron 服务已经启动&#xf…
阅读更多...
pcl协方差计算精度

pcl协方差计算精度

最近在计算法线的时候发现法线的结果偏差很大&#xff0c;经过分析得到在计算点云协方差矩阵时&#xff0c;选择不同的方法会导致不同的结果。下面是测试过程&#xff1a; 1、测试点云 点云是中间一点的邻域点&#xff0c;是从上往下看&#xff0c;法线的方向近似为&#xff0…
阅读更多...
操作股票下单接口的执行流程代码分享

操作股票下单接口的执行流程代码分享

股票下单接口也相当于是程序化交易&#xff0c;可以根据用户的意愿&#xff0c;定制的交易计划去执行&#xff0c;还可以在一定程度上战胜人性的弱点&#xff0c;下面来看看操作股票下单接口的执行流程代码分享&#xff1a; // 委托下单 // category: 0>买入, 1>卖出,…
阅读更多...
DataWhale - OpenCV教程01

DataWhale - OpenCV教程01

MetaData: Author:Link: https://vxr.xet.tech/s/49dV3oPublisher:Date: 2022-12-12 - 16:28 笔记记录的时间 ✅ 2022-12-12 Tag: 软件技能 计算机视觉的发展历史&#xff1a; 1982年马尔的书《视觉》&#xff0c;将视觉的任务分为两类&#xff1a;重建和识别。2012年&#…
阅读更多...
十年老码农现身说法：凛冬将至，为什么我不劝退互联网

十年老码农现身说法：凛冬将至，为什么我不劝退互联网

大家好&#xff0c;我是xxx 这两天在B站刷到好多吐槽秋招拿不到offer的视频&#xff0c;其中有几个看得我又好笑又同情。 有一个老哥说自己19年硕士毕业的时候想要进华为但差了临门一脚没能拿到offer&#xff0c;非常遗憾&#xff0c;最后觉得一定是自己不够强所以没能如愿。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023