【ECharts】折线图

文章目录

  • 折线图1
  • 折线图2
  • 折线图3
  • 示例

参考:
Echarts官网
Echarts 配置项

折线图1

带X轴、Y轴标记线,其中X轴是’category’ 类目轴,适用于离散的类目数据。
在这里插入图片描述

let myChart = echarts.init(this.$refs.line_chart2);
let yList = [400, 500, 600, 800, 1200, 1500, 1300, 900, 700, 600, 500];
let xList = ['n-5', 'n-4', 'n-3', 'n-2', 'n-1', 'n', 'n+1', 'n+2', 'n+3', 'n+4', 'n+5'];
let option = {title: {text: '折线图2',},tooltip: { show: true },xAxis: {type: 'category',trigger: 'axis',axisPointer: {type: 'cross',},data: xList,},yAxis: {type: 'value',//网格线splitLine: {lineStyle: {type: 'dashed', //设置网格线类型 dotted:虚线 solid:实线},},},series: [{type: 'line',smooth: true,symbolSize: 6,symbol: 'circle',data: yList,color: '#FFC310',//区域填充样式areaStyle: {//线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(246,198,56, 0.6)',},{offset: 1,color: 'rgba(246,198,56, 0)',},]),},markLine: {silent: true,symbol: ['none', 'none'],lineStyle: {type: 'dashed',dashOffset: 1,width: 1,opacity: 0.6,},data: [{name: 'x轴标记线',xAxis: 'n',label: {formatter: '{b}:{c}',},lineStyle: {color: '#0050FF',},},{name: 'y轴标记线',yAxis: 800,label: {formatter: '{b}:{c}',position: 'insideEndTop',},lineStyle: {color: '#00C078',},},],},},],
};myChart.setOption(option);

折线图2

带X轴、Y轴标记线,其中’value’ 数值轴,适用于连续数据。
在这里插入图片描述

let myChart = echarts.init(this.$refs.line_chart3);
let intervalNum = 2;
//  数据类型为二维数组
let dataArray = [[0, 400],[2, 500],[4, 800],[5, 1200],[7, 400],[8, 500],[10, 400],[12, 500],
];
let option = {title: {text: '折线图2',},tooltip: {show: true,trigger: 'axis',axisPointer: {type: 'cross',},formatter: '{c}',},xAxis: {type: 'value',axisTick: {// 文字对准刻度alignWithLabel: true,color: '#C1C7D0',},minInterval: intervalNum,maxssInterval: intervalNum,},yAxis: {type: 'value',//网格线splitLine: {lineStyle: {type: 'dashed', //设置网格线类型 dotted:虚线 solid:实线},},},series: [{type: 'line',smooth: true,symbolSize: 6,symbol: 'circle',data: dataArray,color: '#FFC310',//区域填充样式areaStyle: {//线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(246,198,56, 0.6)',},{offset: 1,color: 'rgba(246,198,56, 0)',},]),},markLine: {silent: true,symbol: ['none', 'none'],lineStyle: {color: '#FFC310',type: 'dashed',dashOffset: 1,width: 1,opacity: 0.6,},data: [{name: 'x轴标记线',xAxis: 7.2,label: {formatter: '{b}:{c}',},lineStyle: {color: '#0050FF',},},{name: 'y轴标记线',yAxis: 800,label: {formatter: '{b}:{c}',position: 'insideEndTop',},lineStyle: {color: '#00C078',},},],},},],
};
myChart.setOption(option);

折线图3

多条折线图
在这里插入图片描述

 let myChart = echarts.init(this.$refs.line_chart4);let option = {title: {text: '折线图3',},tooltip: {trigger: 'axis',valueFormatter: value => value + '个',},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true,},toolbox: {feature: {saveAsImage: {},},},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210],},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310],},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410],},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320],},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320],},],};myChart.setOption(option);

示例

 <!--* @Description: * @Author: HMM* @Date: 2023-05-22 10:49:48* @FilePath: \vue-antd-project2\src\views\LineChart.vue
-->
<template><div class="lineChart"><div ref="line_chart1" style="width: 100%; height: 500px"></div><div ref="line_chart2" style="width: 100%; height: 500px"></div><div ref="line_chart3" style="width: 100%; height: 500px"></div><div ref="line_chart4" style="width: 100%; height: 500px"></div><br /></div>
</template>
<script>
import * as echarts from 'echarts';
export default {methods: {initLineChart1() {let myChart = echarts.init(this.$refs.line_chart1);let xData = ['9:00', '11:00', '', '15:00', '17:00', '', '20:00'];let valueData = [6.0, 8.5, 7.6, 3.5, 10.0, 9.5, 11.0];let option = {title: [{text: '恭喜您超过50%的组员!',top: '0',left: '20',textStyle: {color: '#FFA000',fontSize: 13,},},],grid: {top: '50',left: '20',right: '20',bottom: '8%',containLabel: true,},xAxis: [{type: 'category',boundaryGap: false,axisLine: { show: false },axisLabel: {//坐标轴刻度标签的相关设置textStyle: {color: '#000000',margin: 15,},},axisTick: { show: false },data: xData,},],yAxis: [{type: 'value',// min: 1,// max: 100,splitLine: { show: false },axisLine: { show: false },axisLabel: { show: false },axisTick: { show: false },},],series: [{name: '金额',type: 'line',smooth: true, //是否平滑曲线显示symbol: 'none',color: '#1874FF',//区域填充样式areaStyle: {color: 'rgba(24,116,255, 0.2)',shadowColor: 'rgba(24,116,255, 0.9)',shadowBlur: 20,},data: valueData,markLine: {silent: true,symbol: ['none', 'none'],lineStyle: {width: 2,type: 'dotted',color: '#E9E9E9',},data: [{name: '组均',yAxis: 8,label: {position: 'insideStartTop',formatter: '组均:{c} ',},},{name: '我的',yAxis: 10,label: {position: 'insideStartTop',formatter: '我的:{c} ',},},{name: '测试',yAxis: 100,label: {position: 'insideStartTop',formatter: '测试:{c} ',},},],},},],};myChart.setOption(option);},initLineChart2() {let myChart = echarts.init(this.$refs.line_chart2);let yList = [400, 500, 600, 800, 1200, 1500, 1300, 900, 700, 600, 500];let xList = ['n-5', 'n-4', 'n-3', 'n-2', 'n-1', 'n', 'n+1', 'n+2', 'n+3', 'n+4', 'n+5'];let option = {title: {text: '折线图1',},tooltip: { show: true },xAxis: {type: 'category',trigger: 'axis',axisPointer: {type: 'cross',},data: xList,},yAxis: {type: 'value',//网格线splitLine: {lineStyle: {type: 'dashed', //设置网格线类型 dotted:虚线 solid:实线},},},series: [{type: 'line',smooth: true,symbolSize: 6,symbol: 'circle',data: yList,color: '#FFC310',//区域填充样式areaStyle: {//线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(246,198,56, 0.6)',},{offset: 1,color: 'rgba(246,198,56, 0)',},]),},markLine: {silent: true,symbol: ['none', 'none'],lineStyle: {type: 'dashed',dashOffset: 1,width: 1,opacity: 0.6,},data: [{name: 'x轴标记线',xAxis: 'n',label: {formatter: '{b}:{c}',},lineStyle: {color: '#0050FF',},},{name: 'y轴标记线',yAxis: 800,label: {formatter: '{b}:{c}',position: 'insideEndTop',},lineStyle: {color: '#00C078',},},],},},],};myChart.setOption(option);},initLineChart3() {let myChart = echarts.init(this.$refs.line_chart3);let intervalNum = 2;let dataArray = [[0, 400],[2, 500],[4, 800],[5, 1200],[7, 400],[8, 500],[10, 400],[12, 500],];let option = {title: {text: '折线图2',},tooltip: {show: true,trigger: 'axis',axisPointer: {type: 'cross',},formatter: '{c}',},xAxis: {type: 'value',axisTick: {// 文字对准刻度alignWithLabel: true,color: '#C1C7D0',},minInterval: intervalNum,maxssInterval: intervalNum,},yAxis: {type: 'value',//网格线splitLine: {lineStyle: {type: 'dashed', //设置网格线类型 dotted:虚线 solid:实线},},},series: [{type: 'line',smooth: true,symbolSize: 6,symbol: 'circle',data: dataArray,color: '#FFC310',//区域填充样式areaStyle: {//线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(246,198,56, 0.6)',},{offset: 1,color: 'rgba(246,198,56, 0)',},]),},markLine: {silent: true,symbol: ['none', 'none'],lineStyle: {color: '#FFC310',type: 'dashed',dashOffset: 1,width: 1,opacity: 0.6,},data: [{name: 'x轴标记线',xAxis: 7.2,label: {formatter: '{b}:{c}',},lineStyle: {color: '#0050FF',},},{name: 'y轴标记线',yAxis: 800,label: {formatter: '{b}:{c}',position: 'insideEndTop',},lineStyle: {color: '#00C078',},},],},},],};myChart.setOption(option);},initLineChart4() {let myChart = echarts.init(this.$refs.line_chart4);let option = {title: {text: '折线图3',},tooltip: {trigger: 'axis',valueFormatter: value => value + '个',},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true,},toolbox: {feature: {saveAsImage: {},},},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210],},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310],},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410],},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320],},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320],},],};myChart.setOption(option);},},mounted() {this.initLineChart1();this.initLineChart2();this.initLineChart3();this.initLineChart4();},
};
</script>
<style style="less" scoped></style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于“Python”的核心知识点整理大全31

目录 12.4.2 在屏幕上绘制飞船 alien_invasion.py ​编辑12.5 重构&#xff1a;模块 game_functions 12.5.1 函数 check_events() game_functions.py alien_invasion.py 12.5.2 函数 update_screen() game_functions.py alien_invasion.py 12.6 驾驶飞船 12.6.1 响应…

RESTful简介与C/C++实现

一、RESTful简介 RESTful&#xff0c;全称为Representational State Transfer&#xff0c;是一种软件架构风格和设计理念&#xff0c;而不是一种标准。它主要用于Web服务的设计和开发&#xff0c;强调资源的状态表示和状态转移。RESTful风格的设计使得Web服务更加简洁、清晰和…

msvcp120.dll丢失的多种详细有效解决方法

在计算机使用过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是“msvcp120.dll丢失”。那么&#xff0c;msvcp120.dll到底是什么&#xff1f;为什么会出现丢失的情况&#xff1f;丢失后会对电脑产生什么影响&#xff1f;本文将为您详细解答这些问题&#…

HarmonyOS笔记1

修改字体颜色 在Text里边&#xff0c;按一下 . 就行了&#xff0c;按点号会自动提示 fontColor 函数参数给‘#36D’可以把‘Hello World’调成蓝色 onClick(()>{}) 按钮 如何打印第二句话 Text方法 2023年12月21日11:26:52

项目从0到1,架构选型 :单体架构优先考虑

当我听到关于团队使用微服务架构的故事时&#xff0c;我注意到了一个共同的现象。 几乎所有成功的微服务故事都是从一个过于庞大的庞然大物开始的&#xff0c;后来这个庞然大物被拆分了我所听说的几乎所有从零开始构建微服务系统的案例&#xff0c;最终都陷入了严重的麻烦。 …

强烈推荐的前端学习资源,先收藏!

今天分享一些个人收藏的前端学习资源&#xff0c;按一下几个维度简单划分了下&#xff0c;有 3D、框架、构建工具等等。由于这些地址都是我个人收藏的&#xff0c;所以带有一些强烈的主观意识&#xff0c;还有很多优秀的网址没有收录进来&#xff0c;会不断更新的&#xff0c;欢…

系统分析师(软考)知识点整理(二)

会计相关 会计是指记录、分类、汇总、计量和报告发送在企业经济活动中的财务数据的行为 #mermaid-svg-YBI5YPWzqWhRB4kI {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-YBI5YPWzqWhRB4kI .error-icon{fill:#552222…

亚马逊鲲鹏系统引爆广告点击率提升秘籍

在竞争激烈的电商市场&#xff0c;提高广告点击率成为各大卖家争相追求的目标。而如今&#xff0c;亚马逊鲲鹏系统的强大功能再次为卖家们打开了广告优化的新大门。其中&#xff0c;搜索广告功能更是成为提高关键词排名的利器。本文将详细介绍如何通过亚马逊鲲鹏系统实现点击广…

多维时序 | MATLAB实现KOA-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现KOA-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现KOA-CNN-BiGRU-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现KOA-CNN-B…

linux | 软连接与硬链接 | 实测

很多知识&#xff0c;我们都是通过学习其他博主的博客&#xff0c;可是学习的过程 常常需要辩证的去辨别真伪。这很耗精力&#xff0c;最好的方法就是实践去检测。 软链接 和 应链接 在 linux 上操作非常重要 常见场景&#xff1a;最重要的就是&#xff0c;做备份&#xff0c;尤…

Talk | 约翰霍普金斯大学博士生魏晨: De-Diffusion-文本是不同模态的沟通桥梁

本期为TechBeat人工智能社区第557期线上Talk。 北京时间12月20日(周三)20:00&#xff0c;约翰霍普金斯大学博士生—魏晨的Talk已准时在TechBeat人工智能社区开播&#xff01; 她与大家分享的主题是: “De-Diffusion-文本是不同模态的沟通桥梁题”&#xff0c;介绍了她的团队在如…

Linux---进程状态

目录 一、系统进程状态介绍 1.运行状态 2.阻塞状态 3.挂起状态 二、Linux中的进程状态 1.R (running) 2.S (sleeping) 3.D&#xff08;disk sleep&#xff09; 4.T&#xff08;stopped&#xff09; 5.t&#xff08;tracing stop&#xff09; 6.X&#xff08;dead&am…

OpenHarmony应用开发环境搭建指南

OpenHarmony的应用开发主要是基于Deveco Studio&#xff08;目前只支持Windows及Mac平台&#xff09;搭配相应的SDK进行&#xff0c;现对开发环境的搭建进行说明。 1:Deveco下载安装 下载对应平台的安装包即可。接下来以Windows平台为例&#xff0c;进行开发环境的搭建。 下载…

楼宇对讲、可视门铃案例分析

语音通话芯片&#xff1a;D34018,D34118,D5020,D31101; D34018 单片电话机通话电路&#xff0c;合并了必 需的放大器、衰减器和几种控制 功能&#xff0c;包括发送和接收衰减器、 背景噪声电平检测系统和一个衰 减器控制系统&#xff0c;对发送和接收电 平好于背景噪声做出反…

PyCharm添加自动函数文档注释

目录 1、背景2、开启PyCharm自动函数文档注释 1、背景 规范的函数文档注释有助于他人理解代码&#xff0c;便于团队协作、提高效率。但如果我们自己手写函数文档注释将非常耗时耗力。PyCharm安装后默认没有开启自动化函数文档注释&#xff0c;需要我们开启 2、开启PyCharm自动…

反序列化 [SWPUCTF 2021 新生赛]ez_unserialize

打开题目 查看源代码 得到提示&#xff0c;那我们用御剑扫描一下看看 我们知道有个robots.txt&#xff0c;访问一下得到 那我们便访问一下 cl45s.php看看 得到网站源代码 <?phperror_reporting(0); show_source("cl45s.php");class wllm{public $admin;public …

55.0/CSS 的应用(详细版)

目录 55.1.1 设计边框样式 55.1.2 调整边框的粗细 55.1.3 边框颜色 55.1.4 复合设置边框 55.2 模块的边距 55.3 模块的内边距 55.4 层的应用 55.4.1 层的建立 55.4.2 浮动——float 55.4.3 清除浮动 55.4.4 层的定位 55.4.5 设置层的溢出——overflow 55.4.6 设置鼠…

Linux开发工具——vim篇

vim开发工具的使用 文章目录 vim开发工具的使用认识vimvim常用三种模式vim正常模式命令集模式切换移动光标删除文字赋值替换撤销上一次操作更改跳到指定的行 vim末行模式命令集列出行号跳到文件中的某一行&#xff1a;保存文件离开vim查找字符&#xff1a; 总结题外话&#xff…

spring使用@Autowired @Lazy 注解 解决循环依赖

今天在启动项目时报错&#xff1a;org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name ‘colorController’: Unsatisfied dependency expressed through field ‘projectService’; nested exception is org.springframework.…

使用Dropzone提升开发效率的全方位指南

开发过程中&#xff0c;文件上传、图像处理、脚本执行等任务常常是不可或缺的环节。为了提升开发效率&#xff0c;开发者需要一个强大且灵活的工具。在这方面&#xff0c;Dropzone 是一个非常优秀的选择。本文将介绍如何在各种使用场景下&#xff0c;利用 Dropzone 工具来提高开…