vue echarts折线图 折线堆积图和折线面积图

vue echarts折线图 折线堆积图和折线面积图

1、折线堆积图和折线面积图的结合；

上代码

<template><section><divid="performaceLineChart"ref="performaceLineChartRef"style="width: 100%; height: 500px"></div></section>
</template><script>
import * as echarts from "echarts";
export default {name: "", components: {},props: {
},data() {return {chart: null,_thisForChart: null,_thisForWindow: null,};},watch: {},mounted() {this.$nextTick(() => {this.initLineChart();this.addEventListenerToSidebarContainer(this)this.addEventListenerToWindowResize(this)});},beforeDestroy() {if (!this.chart) {return;}this.removeEventListenerToSidebarContainer()this.removeEventListenerToWindowResize()this.chart.dispose();this.chart = null;},methods: {initLineChart() {var chartDom = document.getElementById("performaceLineChart");this.chart = echarts.init(chartDom);this.setOptions();},setOptions(option) {this.chart.setOption({color: ["#ee6666", "#5470c6", "#aeaeae", "#f9c858",],toolbox: {top: "0",right: "10",itemSize: 18,iconStyle: {borderColor: "#aeaeae",borderWidth: 2,},feature: {saveAsImage: {title: "导出图片",name: '导出图片名称'},},},tooltip: {trigger: "axis",backgroundColor: 'rgba( 0, 0, 0,0.7)',borderColor: 'rgba( 0, 0, 0,0.7)',formatter: function (params) {var str = params[0].name + "</br>";for (let item of params) {str =`<span style='color: #fff;'>${str}</span><div style='display:flex;align-items:center;justify-content:space-between;'><span>${item.marker}<span style='color: #fff;'>${item.seriesName}</span></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style='color: #fff;'>${item.value}%</span></div>`;}return str;},},legend: {x: "center",y: "bottom",icon: "circle",textStyle: {},data: ['上海','广州','北京']},grid: {left: "0.5%",right: "1%",bottom: "15%",containLabel: true,},xAxis: {type: "category",boundaryGap: false,axisLabel: {},axisLine: {show: true,lineStyle: {},onZero: false, // X轴线始终位于底部},splitLine: {show: false,},data: ['2024-01-01','2024-01-02','2024-01-03','2024-01-04','2024-01-05','2024-01-06']},yAxis:[{type: "value",scale: true,// interval:  5,splitNumber: 5,// min: 'dataMin',// max: 'dataMax',// min: function(value) {//   return value.min// },// max: function(value) {//   return value.max// },alignTicks: true,// max: function (val) {//   if (Math.abs(val.max)>Math.abs(val.min)) {//     return (Math.abs(val.max)*1.2).toFixed(0);} //   else {//     return (Math.abs(val.min)*1.2).toFixed(1);}},// min: function (val) {//   if(Math.abs(val.max)>Math.abs(val.min)){//     return-(Math.abs(val.max)*1.2).toFixed(0);} //   else {//     return -(Math.abs(val.min)*1.2).toFixed(1);}},axisLabel: {show: true,formatter: (value) => {return `${value.toFixed(1)}%`}},axisLine: {show: false,},splitLine: {show: true,lineStyle: {type: "dotted",},},},{type: "value",// interval:  5,splitNumber: 5,// min: 'dataMin',// max: 'dataMax',// min: function(value) {//   return value.min// },// max: function(value) {//   return value.max// },// alignTicks: true,// max: function (val) {//   if (Math.abs(val.max)>Math.abs(val.min)) {//     return (Math.abs(val.max)*1.2).toFixed(0);} //   else {//     return (Math.abs(val.min)*1.2).toFixed(1);}},// min: function (val) {//   if(Math.abs(val.max)>Math.abs(val.min)){//     return-(Math.abs(val.max)*1.2).toFixed(0);} //   else {//     return -(Math.abs(val.min)*1.2).toFixed(1);}},axisLabel: {show: true,formatter: (value) => {return `${value}%`}},axisLine: {show: false,},splitLine: {show: true,lineStyle: {type: "dotted",},},},{type: "value",// interval:  5,splitNumber: 5,// min: 'dataMin',// max: 'dataMax',// min: function(value) {//   return value.min// },// max: function(value) {//   return value.max// },alignTicks: true,// max: function (val) {//   if (Math.abs(val.max)>Math.abs(val.min)) {//     return (Math.abs(val.max)*1.2).toFixed(0);} //   else {//     return (Math.abs(val.min)*1.2).toFixed(1);}},// min: function (val) {//   if(Math.abs(val.max)>Math.abs(val.min)){//     return-(Math.abs(val.max)*1.2).toFixed(0);} //   else {//     return -(Math.abs(val.min)*1.2).toFixed(1);}},axisLabel: {show: true,formatter: (value) => {return `${value.toFixed(1)}%`}},axisLine: {show: false,},splitLine: {show: true,lineStyle: {type: "dotted",},},},{type: "value",// interval:  5,splitNumber: 5,// min: 'dataMin',// max: 'dataMax',// min: function(value) {//   return value.min// },// max: function(value) {//   return value.max// },// alignTicks: true,// max: function (val) {//   if (Math.abs(val.max)>Math.abs(val.min)) {//     return (Math.abs(val.max)*1.2).toFixed(0);} //   else {//     return (Math.abs(val.min)*1.2).toFixed(1);}},// min: function (val) {//   if(Math.abs(val.max)>Math.abs(val.min)){//     return-(Math.abs(val.max)*1.2).toFixed(0);} //   else {//     return -(Math.abs(val.min)*1.2).toFixed(1);}},axisLabel: {show: true,formatter: (value) => {return `${value}%`}},axisLine: {show: false,},splitLine: {show: true,lineStyle: {type: "dotted",},},},],series: [{name: '上海',type: "line",// stack: "total",yAxisIndex: null,// smooth: true,showSymbol: false,lineStyle: { width: 2 },itemStyle: {normal: {label: {show: false,},},},       areaStyle: null,data: ["-4.11", "11.12", "-5.13", "17.13", "2.13", "-19.13",],},{name: '广州',type: "line",// stack: "total",yAxisIndex: null,// smooth: true,showSymbol: false,lineStyle: { width: 2 },itemStyle: {normal: {label: {show: false,},},},       areaStyle: null,data: ["13.51", "-6.12", "10.13", "4.13", "-10.13", "10.99",],},{name: '北京',type: "line",// stack: "total",yAxisIndex: 2,// smooth: true,showSymbol: false,lineStyle: { width: 0 },itemStyle: {normal: {label: {show: false,},},},       areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: "rgb(174,174,174)",},{offset: 1,color: "rgb(174,174,174)",},],),},data: ["4.11", "1.12", "-5.13", "-7.13", "-5.93", "-6.13",],}]});},// 监听侧边栏导航的宽度发生变化addEventListenerToSidebarContainer(_this) {let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];this._thisForChart = _this;sidebarContainer &&sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);},removeEventListenerToSidebarContainer() {let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];this._thisForChart = nullsidebarContainer &&sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);},sidebarResizeHandler(e) {if (e.propertyName === "width") {this._thisForChart.chart.resize();}},// window 的尺寸发生变化的时候 会执行图表的resizeaddEventListenerToWindowResize(_this) {this._thisForWindow = _this;window.addEventListener("resize", this.windowResizeHandler);},removeEventListenerToWindowResize(_this) {this. _thisForWindow = nullwindow.removeEventListener("resize", this.windowResizeHandler);},windowResizeHandler(e) {this._thisForWindow.chart.resize();},},
};
</script><style lang="scss" scoped></style>

展示效果图
在这里插入图片描述

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

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

相关文章

云计算和边缘计算究竟有什么不同

云计算和边缘计算究竟有什么不同

在数据时代&#xff0c;无论是人的活动还是机器的运作都会产生各种各样海量的数据。在对数据梳理和筛选过程中&#xff0c;计算机的运算处理必不可少。为了减少本地计算机算力成本等限制&#xff0c;越来越多的企业选择了云计算和边缘计算。今天&#xff0c;德迅云安全就带您来…
阅读更多...
qt实现方框调整

qt实现方框调整

效果 在四周调整 代码 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QWidget>class MainWindow : public QWidget {Q_OBJECT public:explicit MainWindow(QWidget *parent 0);~MainWindow();void paintEvent(QPaintEvent *event);void updateRect();void re…
阅读更多...
MySQL B+索引的工作原理及应用

MySQL B+索引的工作原理及应用

引言 在数据库系统中&#xff0c;索引是优化查询、提高性能的关键技术之一。特别是在MySQL数据库中&#xff0c;B树索引作为最常用的索引类型&#xff0c;对数据库性能有着至关重要的影响。本文旨简单解析MySQL中B树索引的工作原理&#xff0c;帮助学生朋友们更好地理解和利用…
阅读更多...
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录

ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; h…
阅读更多...
国产3D自研技术如何突围？眸瑞科技给3D建设、管理带来全新模式

国产3D自研技术如何突围？眸瑞科技给3D建设、管理带来全新模式

眸瑞科技是全球领先的数字孪生引擎技术及服务提供商&#xff0c;它专注于让一切3D模型在全网多端轻量化处理与展示&#xff0c;为行业数字化转型升级与数字孪生应用提供成套的国产自研3D可视化技术、产品与服务。 引言 眸瑞科技是全球领先的数字孪生引擎技术及服务提供商&…
阅读更多...
SSRF漏洞是什么，如何进行有效防护

SSRF漏洞是什么，如何进行有效防护

SSRF全称&#xff1a;Server-Side Request Forgery&#xff0c;即&#xff0c;服务器端请求伪造。是一个由攻击者构造请求&#xff0c;在目标服务端执行的一个安全漏洞。攻击者可以利用该漏洞使服务器端向攻击者构造的任意域发出请求&#xff0c;目标通常是从外网无法访问的内部…
阅读更多...
Ubuntu2004 CMake 使用基础

Ubuntu2004 CMake 使用基础

一、环境安装 win10安装wsl ubuntu2004 #windows c盘工程目录建立软链 ln -s /mnt/c /home/vrviu/ 安装cmake、c编译工具 apt install -y cmake g 二、CMakeLists.txt讲解 准备工作 首先&#xff0c;在/home/vrviu 目录建立一个 cmake 目录 以后我们所有的 cmake 练习都会放…
阅读更多...
一文掌握Vue3：深度解读Vue3新特性、Vue2与Vue3核心差异以及Vue2到Vue3转型迭代迁移重点梳理与实战

一文掌握Vue3：深度解读Vue3新特性、Vue2与Vue3核心差异以及Vue2到Vue3转型迭代迁移重点梳理与实战

每次技术革新均推动着应用性能与开发体验的提升。Vue3 的迭代进步体现在性能优化、API重构与增强型TypeScript支持等方面&#xff0c;从而实现更高效开发、更优运行表现&#xff0c;促使升级成为保持竞争力与跟进现代前端趋势的必然选择。本文深度解读Vue3 响应式数据data、生命…
阅读更多...
稳态视觉诱发电位 (SSVEP) 分类学习系列 (4) :Temporal-Spatial Transformer

稳态视觉诱发电位 (SSVEP) 分类学习系列 (4) :Temporal-Spatial Transformer

稳态视觉诱发电位分类学习系列:Temporal-Spatial Transformer 0. 引言1. 主要贡献2. 提出的方法2.1 解码的主要步骤2.2 网络的主要结构 3. 结果和讨论3.1 在两个数据集下的分类效果3.2 与基线模型的比较3.3 消融实验3.4 t-SNE 可视化 4. 总结欢迎来稿 论文地址&#xff1a;http…
阅读更多...
【Elasticsearch＜二＞✈️✈️】基本属性概念与MySQL数据库的不同之处

【Elasticsearch＜二＞✈️✈️】基本属性概念与MySQL数据库的不同之处

目录 &#x1f378;前言 &#x1f37b;一、Elasticsearch 基本属性 1.1 ES VS MySQL 1.2 ES 属性概念 1.3 ES 的增删改查 &#x1f37a;二、自动补全场景 2.1 场景举例 2.2 使用数据分词器 2.3 查询的流程 2.4 整个查询流程图 &#x1f379;章末 &#x1f378;前言 上次初步…
阅读更多...
[C++ QT项目实战]----C++ QT系统实现多线程通信

[C++ QT项目实战]----C++ QT系统实现多线程通信

前言 在C QT中&#xff0c;多线程通信原理主要涉及到信号与槽机制和事件循环机制。 1、信号与槽机制&#xff1a; 在QT中&#xff0c;信号与槽是一种用于对象间通信的机制。对象可以通过发送信号来通知其他对象&#xff0c;其他对象通过连接槽来接收信号并进行相应的处…
阅读更多...
微信小程序：12.页面导航

微信小程序：12.页面导航

什么是页面导航 页面导航指的是页面之间的相互跳转。例如&#xff0c;浏览器中实现的页面导航的方式有两种&#xff1a; 连接location.href 小程序中实现页面导航的两种方式 声明式导航 在页面上声明一个导航组件 通过点击组件实现页面跳转 导航TabBar页面 是指配置TabB…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023