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

news2025/3/17 20:53:25

实现效果:

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"
              }
            }
          }
        ]
      }

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

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

相关文章

【全部更新完毕】2024电工杯A题数学建模详细思路代码文章分享

A 题&#xff1a;园区微电网风光储协调优化配置 摘要 在全球范围内&#xff0c;气候变化和环境污染问题日益严重&#xff0c;减少碳排放和实现可持续发展成为各国的共同目标。新能源&#xff0c;尤其是风能和光伏发电&#xff0c;因其清洁、可再生的特性&#xff0c;正在全球范…

Python vscode debug: Error while enumerating installed packages.解决

记录一个vscode python debug时出现的错误&#xff1a; 具体错误如下&#xff1a; E00000.030: Error while enumerating installed packages. Traceback (most recent call last): File “/root/.vscode-server/extensions/ms-python.debugpy-2024.0.0-linux-x64/bundled/lib…

【C++11】lambda匿名函数和包装器

目录 一&#xff0c;lambda匿名函数 1-1&#xff0c;lambda的引入 1-2&#xff0c;lambda表达式书写格式 1-3&#xff0c;lambda函数的名称 1-4&#xff0c;lambda捕获列表的使用 1-5&#xff0c;函数对象与lambda表达式 二&#xff0c;包装器 2-1&#xff0c;function…

逻辑这回事(一)----编码规范

说明&#xff1a;优先级是M的规则为强制项&#xff0c;优先级为R的规则为建议项。 通用约束 应有全局观念。 优先级&#xff1a;M 说明&#xff1a;你所编写的代码在成为最终硅片上的一部分之前&#xff0c;需要经过许多设计者利用各种各样的工具进行各种各样的处理。有时&…

【编译原理】LL(1)预测分析法

一、实验目的 LL(1)的含义&#xff1a;第一个L表明自顶向下分析是从左向右扫描输入串&#xff0c;第2个L表明分析过程中将使用最左推导&#xff0c;1表明只需向右看一个符号便可决定如何推导&#xff0c;即选择哪个产生式进行推导。 LL(1) 预测分析方法是确定的自顶向下的语…

[保姆式教程]使用目标检测模型YOLO V8 OBB进行旋转目标的检测:训练自己的数据集(基于卫星和无人机的农业大棚数据集)

最近需要做基于卫星和无人机的农业大棚的旋转目标检测&#xff0c;基于YOLO V8 OBB的原因是因为尝试的第二个模型就是YOLO V8&#xff0c;后面会基于YOLO V9模型做农业大棚的旋转目标检测。YOLO V9目前还不能进行旋转目标的检测&#xff0c;需要修改代码 PS:欢迎大家分享农业大…

Capture One Studio for Mac:打造完美影像的利器

对于摄影师而言&#xff0c;每一次按下快门都是一次对完美影像的追求。而Capture One Studio for Mac正是这样一款能够帮助你实现这一追求的利器。 Capture One Studio for Mac v16.4.2.1中文直装版下载 首先&#xff0c;Capture One Studio for Mac拥有出色的图像处理能力。它…

网络初识 二

一、TCP/IP五层协议 -> 应用层 : 传输的数据在应用程序中如何使用 -> 传输层 : 关注的是通信的起点终点 -> 网络层 : 关注的是通信中的路线规划 -> 数据链路层 : 关注的是相邻节点之间的通信细节 -> 物理层 : 网络通信的基础设施 说是五层,实际上下面…

【Python搞定车载自动化测试】——Python实现CAN总线Bootloader刷写(含Python源码)

系列文章目录 【Python搞定车载自动化测试】系列文章目录汇总 文章目录 系列文章目录&#x1f4af;&#x1f4af;&#x1f4af; 前言&#x1f4af;&#x1f4af;&#x1f4af;一、环境搭建1.软件环境2.硬件环境 二、目录结构三、源码展示1.诊断基础函数方法2.诊断业务函数方法…

GmSSL3.X编译iOS和Android动态库

一、环境准备 我用的Mac电脑编译&#xff0c;Xcode版本15.2&#xff0c;安卓的NDK版本是android-ndk-r21e。 1.1、下载国密源码 下载最新的国密SDK源码到本地。 1.2、安装Xcode 前往Mac系统的AppStore下载安装最新Xcode。 1.3、安卓NDK下载 下载NDK到本地&#xff0c;选…

leetcode每日一题第八十九天

class Solution { public:int subarraySum(vector<int>& nums, int k) {unordered_map<int,int> mp;mp[0] 1;int count 0,pre 0;for(auto x:nums){pre x;if(mp.find(pre-k) ! mp.end()){count mp[pre-k];}mp[pre];}return count;} };

OSM最新台湾电力数据(2024年5月23日数据)转换总结及与(2024年2月16日数据)转换结果对比

osm包含种类繁多&#xff0c;我们这里是只以刚转换的台湾电力设备为例抛砖引玉的进行说明。本次仅仅转换了&#xff0c;变电站、电厂和线路杆塔数据&#xff01; 这种带增强的文件&#xff0c;是我在基础规则之外增加的提取规则。是为了更多的将OSM相关类型数据过滤提取出来&am…

Meta发布Chameleon模型预览,挑战多模态AI前沿

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

LeetCode 279 —— 完全平方数

阅读目录 1. 题目2. 解题思路3. 代码实现 1. 题目 2. 解题思路 此图利用动态规划进行求解&#xff0c;首先&#xff0c;我们求出小于 n n n 的所有完全平方数&#xff0c;存放在数组 squareNums 中。 定义 dp[n] 为和为 n n n 的完全平方数的最小数量&#xff0c;那么有状态…

基于Llama 3搭建中文版(Llama3-Chinese-Chat)大模型对话聊天机器人

前面两篇博文&#xff0c;我们分别在个人笔记本电脑部署了Llama 3 8B参数大模型&#xff0c;并使用Ollama搭建了基于 Web 可视化对话聊天机器人&#xff0c;可以在自己电脑上愉快的与Llama大模型 Web 机器人对话聊天了。但在使用过程中&#xff0c;笔者发现Llama大模型经常出现…

【IC设计】牛客网-序列检测习题总结

文章目录 状态机基础知识VL25 输入序列连续的序列检测VL26 含有无关项的序列检测VL27 不重叠序列检测VL28 输入序列不连续的序列检测参考资料 状态机基础知识 VL25 输入序列连续的序列检测 timescale 1ns/1ns module sequence_detect(input clk,input rst_n,input a,output re…

乡村振兴的乡村环境治理与保护:加强乡村环境治理与保护,改善乡村环境质量,打造美丽宜居的乡村环境

一、引言 随着乡村振兴战略的深入实施&#xff0c;乡村环境治理与保护成为推动乡村全面振兴的关键环节。乡村环境是乡村发展的重要基础&#xff0c;关系到农民的生产生活和身心健康&#xff0c;也直接影响到乡村经济的可持续发展。因此&#xff0c;加强乡村环境治理与保护&…

Stable Diffusion——U-ViT用于扩散建模的 ViT 主干网

1.概述 扩散模型是最近出现的强大的深度生成模型&#xff0c;可用于生成高质量图像。扩散模型发展迅速&#xff0c;可应用于文本到图像生成、图像到图像生成、视频生成、语音合成和 3D 合成。 除了算法的改进&#xff0c;骨干网的改进在扩散建模中也发挥着重要作用。一个典型…

收集 VSCode 常用快捷键

快速复制行 Shift Alt ↑/↓ 都是往下复制行&#xff0c;区别是&#xff1a;按↓复制时光标会跟着向下移动&#xff0c;按↑复制时光标不移动。 向上/向下移动一行 Alt ↑/↓ 删除整行 Ctrl Shift KCtrl x 剪切快捷键在VSCode 可以直接删除一行 垂直编辑 Ctrl…

Vue 安装vue

1、官网安装下载安装nodejs 2、安装完成后&#xff0c;通过命令查看版本,可以查看到版本 node -v npm -v 3、安装Vue CLi npm install -g vue/cli 4、创建项目,vue create test 如果遇到报错&#xff1a; ERROR Error: spawn yarn ENOENT Error: spawn yarn ENOENT at ChildP…