【vue echart】完成一个简单echart图表+自适应

实现效果:

html:

<divref="echartOne"id="echartOne"style="width: 100%; height: 100%"
></div>

js:

    getEchartOne() {let chart = this.$echarts.init(this.$refs.echartOne);chart.setOption({title: {text: "Stacked Line"},tooltip: {trigger: "axis"},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]}]});
//自适应部分window.addEventListener('resize', function () {chart.resize()     
})},

补充知识点:

更改标题,图例的颜色,x轴和y轴的颜色变为白色

{title: {text: ""},tooltip: {trigger: "axis",axisPointer: {type: "shadow"}},legend: {textStyle: {fontSize: 12,color: "#FFFFFF"}},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true},xAxis: [{type: "category",boundaryGap: [0, 0.01],data: citylist,// axisLabel: {//     color: fontColor,//     color: '#FFFFFF',//   },axisLine: {show: true,lineStyle: {color: "#FFFFFF"}}}],yAxis: {type: "value",axisLine: {show: false,lineStyle: {color: "white"}}},series: [{name: "产品个数/个",type: "bar",data: sumList,textStyle: {color: "#00FFFF"},itemStyle: {normal: {color: "#00FFFF"}}},{name: "溯源次数/次",type: "bar",data: numList,itemStyle: {normal: {color: "#FFFF00"}}}]}

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

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

相关文章

vue 纵向滚动菜单, 点击滚动到选中菜单

1 背景 需要设计一个纵向滚动菜单&#xff0c;要求丝滑点&#xff0c;默认显示选中菜单 2 思路 给定一个容器&#xff0c;样式包含overflow:hidden&#xff0c;默认高宽足够显示一个菜单&#xff08;以下用图标代替菜单&#xff09;&#xff0c;鼠标悬浮时增大容器高度&#…

揭秘Python的魔法:装饰器的超能力大揭秘 ‍♂️✨

文章目录 Python进阶之装饰器详解1. 引言装饰器的概念与意义装饰器在Python编程中的作用 2. 背景介绍2.1 函数作为对象2.2 高阶函数 3. 装饰器基础3.1 理解装饰器3.2 装饰器的工作原理 4. 带参数的装饰器4.1 为什么需要带参数4.2 实现带参数的装饰器使用函数包裹装饰器使用类实…

通过el-tree自定义渲染网页版工作目录,实现鼠标悬浮显示完整名称、用icon区分文件和文件夹等需求

目录 一、通过el-tree自定义渲染网页版工作目录 1.1、需求介绍 1.2、使用el-tree生成文档目录 1.2.1、官方基础用法 ①效果 ②代码&#xff1a; 1.2.2、自定义文档目录&#xff08;实现鼠标悬浮显示完整名称、用icon区分文件和文件夹&#xff09; ①效果&#xff08;直接效…

语义化版本规范

Releases 是指软件或项目的正式发布版本&#xff0c;在浏览一些开源仓库时&#xff0c;可以看到当前项目最新版本和历史版本 仔细研究就会发现&#xff0c;版本号不是以固定值递增的&#xff0c;有时候第三位加 1&#xff0c;有时候加 2&#xff0c;有时候直接把第一位加 1&…

BUUCTF---web---[BJDCTF2020]ZJCTF,不过如此

1、点开连接&#xff0c;页面出现了提示 传入一个参数text&#xff0c;里面的内容要包括I have a dream。 构造&#xff1a;?/textI have a dream。发现页面没有显示。这里推测可能得使用伪协议 在文件包含那一行&#xff0c;我们看到了next.php的提示&#xff0c;我们尝试读取…

Blender导出fbx模型,导入到ue5中模型丢失纹理材质

UE5系列文章目录 文章目录 UE5系列文章目录前言一、问题原因二、最终效果 前言 Blender导出fbx模型&#xff0c;导入到ue5中&#xff0c;发现模型丢失纹理材质&#xff0c;里面的原神人物模型妮露居然是白模&#xff0c;郁闷了大半天 一、问题原因 我在Blender导出fbx文件时…

JVM类加载

文章目录 类加载1.类的生命周期加载阶段连接阶段初始化阶段 2.类加载器类加载器的分类启动类加载器(Bootstarp)扩展类加载器&应用程序加载器 3.类的双亲委派机制什么是双亲委派机制&#xff1f;打破双亲委派机制自定义类加载器线程上下文类加载器 类加载 注&#xff1a;本…

Springboot+Vue项目-基于Java+MySQL的酒店管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

为什么选择 Flink 做实时处理

优质博文&#xff1a;IT-BLOG-CN 为什么选择 Flink 【1】流数据更真实地反映了我们的生活方式&#xff08;实时聊天&#xff09;&#xff1b; 【2】传统的数据架构是基于有限数据集的&#xff08;Spark 是基于微批次数据处理&#xff09;&#xff1b; 【3】我们的目标&#xf…

Python协程的作用

过分揣测别人的想法&#xff0c;就会失去自己的立场。大家好&#xff0c;当代软件开发领域中&#xff0c;异步编程已成为一种不可或缺的技术&#xff0c;用于处理大规模数据处理、高并发网络请求、实时通信等应用场景。而Python协程&#xff08;Coroutine&#xff09;作为一种高…

【数据结构】数据结构中的隐藏玩法——栈与队列

前言&#xff1a; 哈喽大家好&#xff0c;我是野生的编程萌新&#xff0c;首先感谢大家的观看。数据结构的学习者大多有这样的想法&#xff1a;数据结构很重要&#xff0c;一定要学好&#xff0c;但数据结构比较抽象&#xff0c;有些算法理解起来很困难&#xff0c;学的很累。我…

【力扣刷题笔记第三期】Python 数据结构与算法

先从简单的题型开始刷起&#xff0c;一起加油啊&#xff01;&#xff01; 点个关注和收藏呗&#xff0c;一起刷题鸭&#xff01;&#xff01; 第一批题目 1.设备编号 给定一个设备编号区间[start, end]&#xff0c;包含4或18的编号都不能使用&#xff0c;如&#xff1a;418、…

安全访问python字典:避免空键错误的艺术

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言 二、直接访问字典键的问题 三、使用get方法安全访问字典键 四、get方法的实际应…

个人IV代码签名证书1000

代码签名证书是一种用来验证代码来源、完整性和是否被篡改的数字证书。这款数字证书可以对软件代码进行数字签名&#xff0c;使得代码的发布者和接收者能够确认代码的真实性和完整性。通常代码签名证书只支持企事业单位申请&#xff0c;Certum个人IV代码签名证书是专为个人软件…

刷代码随想录有感(76):回溯算法——全排列

题干&#xff1a; 代码&#xff1a; class Solution { public:vector<int> tmp;vector<vector<int>> res;void backtracking(vector<int> nums, vector<int> used){if(tmp.size() nums.size()){res.push_back(tmp);return;}for(int i 0; i &l…

罗德里格斯公式(旋转矩阵)推导

文章目录 1. 推导2. 性质3. 参考 1. 推导 r r r为旋转轴&#xff0c; θ \theta θ为旋转角度。 先将旋转轴单位化 u r ∣ ∣ r ∣ ∣ u\frac{r}{||r||} u∣∣r∣∣r​ 旋转可以被分为垂直和旋转两个方向&#xff0c; 我们求沿轴方向的分量其实就是在求 p p p向量在 u u u方…

Mujava 工具的简单使用

首先下载openjava.jar和mujava.jar&#xff0c;以及自己手写一个mujava.config指向存放mujava的目录&#xff0c;并将这些文件放在mujava目录下。此时&#xff0c;基本的mujava环境就搭建好了。 分别创建src&#xff08;存放源码文件&#xff09;、classes&#xff08;存放源码…

从零搭建python环境:深入解析虚拟环境与Python版本管理

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;为何需要虚拟环境&#xff1f; 二、虚拟环境的创建与命名 1. 虚拟环境…

CTFHUB技能树——SSRF(二)

目录 上传文件 ​FastCGI协议 Redis协议 上传文件 题目描述&#xff1a;这次需要上传一个文件到flag.php了.祝你好运 index.php与上题一样&#xff0c;使用POST请求的方法向flag.php传递参数 //flag.php页面源码 <?phperror_reporting(0);if($_SERVER["REMOTE_ADDR&…

2024“电工杯”数学建模A题《园区微电网风光储协调优化配置》思路和代码分享

A 题&#xff1a;园区微电网风光储协调优化配置 这个题目整体就是一个优化问题&#xff0c;可以采用MatlabYalmipGurobi求解器进行求解&#xff0c;持续更新中&#xff0c;敬请关注&#xff01;&#xff01; 园区微电网由风光发电和主电网联合为负荷供电&#xff0c;为了尽量提…