【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.mzph.cn/web/14308.shtml

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

相关文章

云原生|为什么服务网格能够轻松重塑微服务?一文讲清楚!

目录 一、概述 二、 设计 三、服务网格 四、总结 一、概述 容器化技术与容器编排推动了微服务架构应用的演进&#xff0c;于是应用的扩展与微服务的数量日益增加&#xff0c;新的问题随之而来&#xff0c;监控服务的性能变得越来越困难&#xff0c;微服务与微服务之间相互通…

Kafka-集群管理者(Controller)选举机制、任期(epoch)机制

Kafka概述 Kafka-集群管理者&#xff08;Controller&#xff09;选举机制 Kafka中的Controller是Kafka集群中的一个特殊角色&#xff0c;负责对整个集群进行管理和协调。Controller的主要职责包括分区分配、副本管理、Leader选举等。当当前的Controller节点失效或需要进行重新…

嵌入式实时操作系统笔记1:RTOS入门_理解简单的OS系统

今日开始学习嵌入式实时操作系统RTOS&#xff1a;UCOS-III实时操作系统 本次目标是入门RTOS&#xff0c;理解多任务系统...... 本文只是个人学习笔记&#xff0c;基本都是对网上资料的整合...... 目录 STM32裸机与RTOS区别&#xff1a; 裸机中断示例&#xff1a; RTOS对优先级…

Spring MVC/Web

1.Spring MVC 的介绍 Spring Web MVC是基于Servlet API构建的原始Web框架&#xff0c;也是Spring框架的一部分。它提供了灵活可扩展的MVC架构&#xff0c;方便开发者构建高性能的Web应用程序&#xff0c;并与 Spring 生态系统无缝集成。 2.MVC 设计模式 MVC&#xff08;Model…

设计模式—23种设计模式重点 表格梳理

设计模式的核心在于提供了相关的问题的解决方案&#xff0c;使得人们可以更加简单方便的复用成功的设计和体系结构。 按照设计模式的目的可以分为三大类。创建型模式与对象的创建有关&#xff1b;结构型模式处理类或对象的组合&#xff1b;行为型模式对类或对象怎样交互和怎样…

研发机构大数据迁移如何保障敏感数据不泄露

随着云计算和大数据技术的飞速进步&#xff0c;越来越多的企业正试图通过数据迁移来提升IT基础设施的效率&#xff0c;减少成本&#xff0c;并增强业务的灵活性。但是&#xff0c;这一过程并非没有它的挑战&#xff0c;尤其是在数据安全方面。数据在转移过程中可能会遭遇黑客攻…

解决深度确定问题:使用不相交集合森林

解决深度确定问题&#xff1a;使用不相交集合森林 引言不相交集合森林&#xff08;DSF&#xff09;基础按秩合并与路径压缩深度确定问题的解决方案实现MAKE-TREE修改FIND-SET实现FIND-DEPTH实现GRAFT分析最坏情况运行时间结论参考文献 引言 在计算机科学中&#xff0c;树结构是…

时空扭曲:重温相对论的终极挑战,探寻真理的脚步

大家都知道&#xff0c;相对论是爱因斯坦提出的划时代理论&#xff0c;为人类认知时空和引力做出了革命性贡献。但这个理论真的万无一失吗&#xff1f;近日&#xff0c;一项新研究提出了测试时间扭曲的新方法&#xff0c;或许能让我们重新审视相对论在宇宙大尺度上的适用性。 时…

HTML5好看的通用网站模板源码

文章目录 1.设计来源1.1 主界面1.2 模板菜单1 界面1.3 模板菜单2 界面1.4 模板菜单3 界面1.5 下拉菜单1 界面1.6 下拉菜单2 界面1.7 模板菜单4 界面1.8 模板菜单5 界面1.9 界面底部 2.效果和源码2.1 动态效果2.2 源码目录2.3 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址…

Python 造数据神器Faker

大家好&#xff0c;在编写代码过程中&#xff0c;我们经常需要一些假数据来进行测试或者演示。手动创建这些数据不仅耗时&#xff0c;而且容易出错。幸运的是&#xff0c;Python有一个非常有用的库叫做Faker&#xff0c;它可以生成各种类型的假数据&#xff0c;从名字、地址到公…

day 38 435.无重叠区间 763.划分字母区间 56. 合并区间 738.单调递增的数字 968.监控二叉树

435.无重叠区间 思路 为了使区间尽可能的重叠所以排序来使区间尽量的重叠&#xff0c;使用左边界排序来统计重叠区间的个数与452. 用最少数量的箭引爆气球恰好相反。 代码 class Solution {public int eraseOverlapIntervals(int[][] intervals) {Arrays.sort(intervals,(a,…

如何在cPanel面板中开启盗链保护

本周有一个客户&#xff0c;购买Hostease的主机&#xff0c; 客户购买的是Linux虚拟主机&#xff0c;带cPanel面板的。询问我们的在线客服&#xff0c;如何可以防止他的网站上的图片不被盗用。cPanel的盗链保护功能可以帮助客户防止图片被盗链。 盗链&#xff08;Hotlinking&a…

呆马科技----构建智能可信的踏勘云平台

近年来&#xff0c;随着信息技术的快速发展&#xff0c;各个行业都在积极探索信息化的路径&#xff0c;以提升工作效率和服务质量。智慧踏勘云平台是基于区块链和大数据技术构建的全流程智慧可信踏勘解决平台。平台集远程视频、数据显示、工作调度、过程记录为一体&#xff0c;…

有容量限制的车辆路径规划问题(Capacitated Vehicle Routing Problem)

在看matlab的时候发现了这篇文章https://www.frontiersin.org/articles/10.3389/fict.2019.00013/full 仔细阅读一下。(英语渣渣&#xff0c;自学用) The Capacitated Vehicle Routing Problem (CVRP) is an NP-optimization problem (NPO) that has been of great interest …

图像处理之边缘检测(C++)

图像处理之边缘检测&#xff08;C&#xff09; 文章目录 图像处理之边缘检测&#xff08;C&#xff09;前言一、Roberts算子1.原理2.代码实现 二、Sobel算子1.原理2.代码实现 三、Prewitt算子1.原理2.代码实现 四、Laplacian算子1.原理2.代码实现 五、LOG算子1.原理2.代码实现 …

完全匹配企业需求的替代FTP升级软件怎么找

企业在处理数据传输时&#xff0c;效率和安全性是关键。尽管传统的FTP曾被广泛采用&#xff0c;但因其传输慢、安全性不足和难以管理等问题&#xff0c;已不再满足现代企业的需求。许多企业正在寻找能够满足其需求的FTP替代方案&#xff0c;但市场上选择众多&#xff0c;找到合…

Python01:初入Python(Mac)

Python环境准备 下载Python&#xff1a;官网https://www.python.org/ 下载PyCharm&#xff1a;官网https://www.jetbrains.com/pycharm/download Python与PyCharm的关系 Python&#xff08;解释器&#xff09;&#xff1a;机器语言—>翻译人员–>翻译成电脑能读懂的 PyC…

STM32应用开发进阶--SPI总线(7脚OLED中景园ss1306+HAL库_硬件SPI/软件模拟SPI)

实现目标 1、掌握SPI总线基础知识&#xff1b; 2、会使用软件模拟SPI总线和STM32硬件SPI总线&#xff1b; 3、 学会STM32CubeMX软件关于SPI的配置; 4、掌握OLED显示屏驱动&#xff1b; 5、具体目标&#xff1a;&#xff08;1&#xff09;用STM32硬件SPI驱动OLED显示“你好…

抽烟行为检测:从传统巡查到智能算法

在当前人工智能和计算机视觉技术的迅猛发展下&#xff0c;基于视觉分析的抽烟行为检测算法成为一种高效的技术手段。此类算法通常依赖于深度学习模型&#xff0c;特别是卷积神经网络&#xff08;CNN&#xff09;&#xff0c;通过对摄像头捕捉的视频流进行实时分析&#xff0c;能…

在旧版 Nginx 官方 Dockerfile 上集成第三方模块的探索

问题背景 线上生产环境用的 nginx 1.21, 然后由于新功能引入的一个问题&#xff0c;需要使用第三方模块 ngx_http_subs_filter_module&#xff0c;目的是使用正则表达式来移除响应结果中的某些数据。 由于这个客户的环境非常重要&#xff0c;组内的大哥们也不敢随便升级 ngin…