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

实现效果:

html:

<div
       ref="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"
              }
            }
          }
        ]
      }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

科技产业园3D探秘:未来科技之城的奇幻之旅

在数字时代的浪潮中&#xff0c;科技产业园区成为了推动城市经济发展、科技创新的重要引擎。 当我们打开科技产业园的3D可视化模型&#xff0c;仿佛穿越时空&#xff0c;来到了一个充满奇幻色彩的科技世界。在这里&#xff0c;高楼大厦鳞次栉比&#xff0c;绿色植被点缀其间&am…

Python协程的作用

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

数组-区间合并

一、题目描述 二、题目思路 这里提供满足基本要求的解题思路&#xff1a; 1.先对列表内按照start大小升序排序&#xff0c;这里创建Comparator接口的实现类&#xff0c;重写compare方法。 2.遍历intervals&#xff0c;设置laststart、lastend两个变量与当前区间相比较&#…

JavaEE技术之分布式事务(理论、解决方案、Seata解决分布式事务问题、Seata之原理简介、断点查看数据库表数据变化)

文章目录 JavaEE技术之分布式事务准备:1. 本地事务回顾1.1 什么是事务1.2 事务的作用1.3 事务ACID四大特性1.4 事务的并发问题1.5 MySQL事务隔离级别1.6 事务相关命令(了解)1.7 事务传播行为&#xff08;propagation behavior&#xff09;1.8 伪代码练习1.9 回滚策略1.10 超时事…

arcgisPro精确移动要素某一点至指定点位

1、打开要素&#xff0c;如下&#xff1a; 2、选择移动工具&#xff0c;如下&#xff1a; 3、选择需要移动的要素&#xff0c;如下&#xff1a; 4、按住Ctrl键&#xff0c;移动锚点的位置至三角形顶点位置&#xff0c;如下&#xff1a; 5、拖动锚点至上面多边形的左上角点&…

CS西电高悦计网课设——校园网设计

校园网设计 一&#xff0c;需求分析 所有主机可以访问外网 主机可以通过域名访问Web服务器 为网络配置静态或者动态路由 图书馆主机通过DHCP自动获取IP参数 为办公楼划分VLAN 为所有设备分配合适的IP地址和子网掩码&#xff0c;IP地址的第二个字节使用学号的后两位。 二…

K8s资源限制和三种探针

一 默写总结 1 pod 的组成 ① Pod 中有几种容器 init 初始化 &#xff0c;阻塞主容器运行&#xff0c;初始化后方可运行主容器 pause 基础容器&#xff1a; 提供network 的 namespace 和 共享存储 业务容器&#xff1a; 跑Pod 主应用 &#xff08;POD中跑什么&#xff1a;微…

MySQL-性能分析

1、数据库服务器的优化步骤 2、查看系统性能参数 可以使用show status语句查询一些MySQL数据库服务器的性能参数 执行频率语法格式&#xff1a;show [ global | session ] status like 参数 &#xff1b;常用性能参数如下所示 参数名说明connection连接MySQL服务器的次数upti…

某大型制造集团企业信息化建设总体规划设计方案(67页PPT)

方案介绍&#xff1a; 随着信息技术的飞速发展&#xff0c;企业信息化建设已成为提高管理效率、增强企业竞争力的重要手段。某大型制造集团为应对市场变化、提升管理水平、优化资源配置&#xff0c;决定进行全面深入的信息化建设。本方案旨在构建一个集生产、管理、销售、物流…

Linux程序开发(十):文件分类器趣味设计

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

Win10蓝牙鼠标不能移动问题解决

问题描述&#xff1a;鼠标是没损坏的&#xff0c;使用过程中&#xff0c;光标突然就不能移动了&#xff0c;但右键和滚轮还是有反应。 解决&#xff1a; 1&#xff0c;删除蓝牙设置中的如下配置&#xff08;我只使用了无线鼠标&#xff0c;没有无线键盘&#xff09; 2&#x…

智慧校园为高校带来哪些价值

在21世纪的教育图景中&#xff0c;"智慧"不再仅仅是一个科技名词&#xff0c;它已成为衡量教育现代化水平的重要标志。智慧校园&#xff0c;这一融合了物联网、大数据、云计算等先进技术的教育新形态&#xff0c;正逐步成为高校转型升级的关键驱动力。本文将从多个维…

【题解】AB33 相差不超过k的最多数(排序 + 滑动窗口)

https://www.nowcoder.com/practice/562630ca90ac40ce89443c91060574c6?tpId308&tqId40490&ru/exam/oj 排序 滑动窗口 #include <iostream> #include <vector> #include <algorithm> using namespace std;int main() {int n, k;cin >> n &…

【Java】/*类和对象(下)*/

目录 一、封装 1.1 初识封装 1.2 如何封装成员变量 1.3 如何使用封装后的成员变量 二、访问限定符 三、包 3.1 包的概念 3.2 如何自定义包 3.3 导入包中的类 3.4 包的访问权限控制举例 示例一&#xff1a;private修饰成员变量 示例二&#xff1a; 不去修饰成员变…

有容量限制的车辆路径规划问题(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 …

秋招突击——算法打卡——5/24——无重复字符的最长字串

题目描述 实现代码 // 无重复字符的最长子串 int lengthOfLongestSubstring(string s) {int l 0,r 0;int res 0;unordered_map<char,int> temp;while(l < s.size()){temp[s.at(l)] l;for (r l 1; r < s.size() ; r) {if(temp.count(s.at(r))) break;else te…

CTF网鼎杯2020朱雀组 thinkjava思路记录

1.代码分析 BUUCTF在线评测 (buuoj.cn)打开ctf赛题之后&#xff0c;下载class文件&#xff0c;这个部分是不完整点的源码 在sqldict中存在一个sql注入点&#xff0c;没有采用java的预编译&#xff0c;调用了这个的是在test中&#xff0c;同时&#xff0c;这个采用了swagger接口…

基于 Faster-RCNN 的水稻叶片病害检测方法研究

1 前言 本次分享是使用基于 Faster-RCNN 的水稻叶片病害检测的深度学习算法研究&#xff0c;也是我研究的课题&#xff0c;本文本文使用的算法架构为 Faster R-CNN&#xff0c;研究的课题为使用两种不同的主干特征提取网ResNet-50 和VGG-16 模型进行模型训练和对比评估那…

windows ssh客户端mobaxterm密码登录到debian12 openssh服务器

1&#xff0c;在debian12生成公钥、秘钥 ssh-keygen -t rsa ~/.ssh/id_rsa 是秘钥&#xff0c;要放到windows的&#xff08;这里先不要放&#xff0c;等转换一下再放&#xff09;&#xff1b; ~/.ssh/id_rsa.pub 是公钥&#xff0c;放在debian12本地就好了&#xff0c; 顺…

HCIA第二天复习上

延长传输距离-------中继器&#xff08;放大器&#xff09;------物理层设备 可以延长5倍传输距离 增加网络节点数量 网络拓扑结构 1直线型拓扑 信息安全性差 网络延迟高传输速度慢 2环形拓扑 3星型拓扑 4网状型拓扑 传输效率高&#xff0c;…