Vue---Echarts

项目需要用echarts来做数据展示，现记录vue3引入并使用echarts的过程。

1. 使用步骤

  1. 安装 ECharts：使用 npm 或 yarn 等包管理工具安装 ECharts。

    npm install echarts
```

  2. 在 Vue 组件中引入 ECharts：在需要使用图表的 Vue 组件中，引入 echarts 模块。

    import * as echarts from 'echarts';
```

  3. 创建图表容器：在组件的模板中创建一个容器元素，用于渲染图表。

    <template><div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
```

  4. 在组件的 setup 函数中，获取图表容器的 DOM 元素，并创建图表实例。

    import { ref, onMounted } from 'vue';export default {setup() {const chartContainer = ref<HTMLElement | null>(null);onMounted(() => {if (chartContainer.value) {const chartInstance = echarts.init(chartContainer.value);// 在 chartInstance 上进行图表的配置和数据处理}});return {chartContainer,};},
};
```在 `setup` 函数中，我们使用 `ref` 创建了一个响应式的 `chartContainer` 变量来引用图表容器的 DOM 元素。在 `onMounted` 钩子函数中，我们可以获取到图表容器的 DOM 元素，并使用 `echarts.init` 方法创建图表实例。接下来，你可以在 `chartInstance` 上进行图表的配置和数据处理。

  5. 配置和绘制图表：在 chartInstance 上进行图表的配置和数据处理，然后调用 chartInstance.setOption 方法将配置应用到图表上。

    import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';export default {setup() {const chartContainer = ref<HTMLElement | null>(null);onMounted(() => {if (chartContainer.value) {const chartInstance = echarts.init(chartContainer.value);const options = {// 图表的配置项和数据// 可根据 ECharts 的文档和示例进行配置// 例如：title、xAxis、yAxis、series 等配置项};chartInstance.setOption(options);}});return {chartContainer,};},
};
```在 `options` 对象中，你可以根据 ECharts 的文档和示例配置图表的各种选项，例如标题、坐标轴、系列数据等。然后，使用 `chartInstance.setOption` 方法将配置应用到图表上。

  6. 在模板中渲染图表容器：在组件的模板中使用 v-bind 将图表容器绑定到 chartContainer 变量。

    <template><div v-bind:ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>
```这样，图表容器就会被渲染出来，并在 `onMounted` 钩子函数中初始化和绘制图表。

然后可以根据 ECharts 的文档和示例，进一步配置和定制图表，接下来是常见的图表使用。

2. 常见图表使用

     2.1.  折线图（Line Chart）
<template><div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template><script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';export default {setup() {const chartContainer = ref<HTMLElement | null>(null);onMounted(() => {if (chartContainer.value) {const chartInstance = echarts.init(chartContainer.value);const options = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{type: 'line',data: [120, 200, 150, 80, 70, 110, 130],},],};chartInstance.setOption(options);}});return {chartContainer,};},
};
</script>
     2.2. 柱状图（Bar Chart）
<template><div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template><script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';export default {setup() {const chartContainer = ref<HTMLElement | null>(null);onMounted(() => {if (chartContainer.value) {const chartInstance = echarts.init(chartContainer.value);const options = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{type: 'bar',data: [120, 200, 150, 80, 70, 110, 130],},],};chartInstance.setOption(options);}});return {chartContainer,};},
};
</script>
     2.3. 饼状图（Pie Chart）
<template><div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template><script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';export default {setup() {const chartContainer = ref<HTMLElement | null>(null);onMounted(() => {if (chartContainer.value) {const chartInstance = echarts.init(chartContainer.value);const options = {series: [{type: 'pie',data: [{ value: 335, name: 'Direct' },{ value: 310, name: 'Email' },{ value: 234, name: 'Affiliate' },{ value: 135, name: 'Video Ads' },{ value: 1548, name: 'Search Engine' },],},],};chartInstance.setOption(options);}});return {chartContainer,};},
};
</script>
     2.4. 散点图（Scatter Chart）
<template><div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template><script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';export default {setup() {const chartContainer = ref<HTMLElement | null>(null);onMounted(() => {if (chartContainer.value) {const chartInstance = echarts.init(chartContainer.value);const options = {xAxis: {},yAxis: {},series: [{type: 'scatter',data: [[10.0, 8.04],[8.0, 6.95],[13.0, 7.58],[9.0, 8.81],[11.0, 8.33],[14.0, 9.96],[6.0, 7.24],[4.0, 4.26],[12.0, 10.84],[7.0, 4.82],[5.0, 5.68],],},],};chartInstance.setOption(options);}});return {chartContainer,};},
};
</script>
    2.5. 雷达图（Radar Chart）
<template><div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template><script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';export default {setup() {const chartContainer = ref<HTMLElement | null>(null);onMounted(() => {if (chartContainer.value) {const chartInstance = echarts.init(chartContainer.value);const options = {radar: {indicator: [{ name: 'Sales', max: 6500 },{ name: 'Administration', max: 16000 },{ name: 'Information Technology', max: 30000 },{ name: 'Customer Support', max: 38000 },{ name: 'Development', max: 52000 },{ name: 'Marketing', max: 25000 },],series: [{type: 'radar',data: [{value: [4200, 3000, 20000, 35000, 50000, 18000],name: 'Allocated Budget',},{value: [5000, 14000, 28000, 26000, 42000, 21000],name: 'Actual Spending',},],},],},};chartInstance.setOption(options);}});return {chartContainer,};},
};
</script>
    2.6. 面积图（Area Chart）
<template><div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template><script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';export default {setup() {const chartContainer = ref<HTMLElement | null>(null);onMounted(() => {if (chartContainer.value) {const chartInstance = echarts.init(chartContainer.value);const options = {xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},yAxis: {type: 'value',},series: [{type: 'line',areaStyle: {},data: [820, 932, 901, 934, 1290, 1330, 1320],},],};chartInstance.setOption(options);}});return {chartContainer,};},
};
</script>
    2.7. 仪表盘（Gauge Chart）
<template><div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template><script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';export default {setup() {const chartContainer = ref<HTMLElement | null>(null);onMounted(() => {if (chartContainer.value) {const chartInstance = echarts.init(chartContainer.value);const options = {series: [{type: 'gauge',detail: { formatter: '{value}%' },data: [{ value: 50, name: 'Completion Rate' }],},],};chartInstance.setOption(options);}});return {chartContainer,};},
};
</script>
    2.8. 漏斗图（Funnel Chart）
<template><div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template><script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';export default {setup() {const chartContainer = ref<HTMLElement | null>(null);onMounted(() => {if (chartContainer.value) {const chartInstance = echarts.init(chartContainer.value);const options = {series: [{type: 'funnel',data: [{ value: 60, name: 'Step 1' },{ value: 40, name: 'Step 2' },{ value: 20, name: 'Step 3' },{ value: 80, name: 'Step 4' },{ value: 100, name: 'Final Step' },],},],};chartInstance.setOption(options);}});return {chartContainer,};},
};
</script>

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

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

相关文章

深入理解Java中的锁机制

深入理解Java中的锁机制

引言 大家好&#xff0c;我是小黑。今天咱们来聊聊Java中的锁机制&#xff0c;这可是并发编程的核心。你知道吗&#xff0c;在并发编程的世界里&#xff0c;正确地使用锁就像是掌握了一把神奇的钥匙&#xff0c;它能帮咱们在多线程的混战中保持秩序&#xff0c;防止数据被乱改…
阅读更多...
opencv知识库：基于cv2.flip()函数对图像进行随机翻转(水平/垂直)

opencv知识库：基于cv2.flip()函数对图像进行随机翻转(水平/垂直)

需求场景 欲对RGB格式的lena图像进行随机翻转&#xff0c;要求这些图像不翻转、水平翻转、垂直翻转的概率都为1/3。 功能代码 import cv2 import random# 读取并展示图像 img cv2.imread("lena.jpg") cv2.imshow(lena, img) cv2.waitKey(0)for i in range(6): #…
阅读更多...
Hdoop学习笔记（HDP）-Part.18 安装Flink

Hdoop学习笔记（HDP）-Part.18 安装Flink

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …
阅读更多...
头歌JUnit单元测试相关实验入门

头歌JUnit单元测试相关实验入门

一、入门实验 1.1第一个Junit测试程序 任务描述 请学员写一个名为testSub()的测试函数&#xff0c;来测试给定的减法函数是否正确。 相关知识 Junit编写原则 1、简化测试的编写&#xff0c;这种简化包括测试框架的学习和实际测试单元的编写。 2、测试单元保持持久性。 3、利用…
阅读更多...
短线买入卖出有哪些交易技巧？

短线买入卖出有哪些交易技巧？

前面两节课&#xff0c;我们认识了短线交易&#xff0c;知道了短线交易常见的买入卖出时机&#xff0c;这节课&#xff0c;我们来讲解一下短线买入卖出的一些交易技巧。话不多时&#xff0c;直接进入重点&#xff01; 一、短线交易要果断 短线波动快&#xff0c;在出现买卖信号…
阅读更多...
排序算法总结（Python、Java）

排序算法总结（Python、Java）

Title of Content 1 冒泡排序 Bubble sort&#xff1a;两两交换&#xff0c;大的冒到最后概念排序可视化代码实现Python - 基础实现Python - 优化实现Java - 优化实现C - 优化实现C - 优化实现 2 选择排序 Selection sort&#xff1a;第i轮遍历时&#xff0c;将未排序序列中最小…
阅读更多...
反序列化漏洞详解（一）

反序列化漏洞详解（一）

目录 一、php面向对象 二、类 2.1 类的定义 2.2 类的修饰符介绍 三、序列化 3.1 序列化的作用 3.2 序列化之后的表达方式/格式 ① 简单序列化 ② 数组序列化 ③ 对象序列化 ④ 私有修饰符序列化 ⑤ 保护修饰符序列化 ⑥ 成员属性调用对象 序列化 四、反序列化 …
阅读更多...
unity学习笔记

unity学习笔记

一、线段渲染器 在Unity中&#xff0c;线段渲染器&#xff08;Line Renderer&#xff09;是一种用于在场景中绘制线段的组件。线段渲染器非常适合用于创建轨迹、路径、光束等效果。 1. 创建Line Renderer&#xff1a;在Unity编辑器中&#xff0c;你可以通过创建空对象 -> …
阅读更多...
Linux - 动态库的加载 和 重谈进程地址空间 - vscode 当中的 Remote - SSH 插件

Linux - 动态库的加载 和 重谈进程地址空间 - vscode 当中的 Remote - SSH 插件

推书&#xff1a;《现代操作系统》《操作系统--精髓于设计原理》《UNIX环境高级编程》 目录 前言 程序的加载 程序没有加载之前的地址&#xff08;此时还是程序&#xff09; 程序被加载到内存之后&#xff08;此时是进程&#xff09; 动态库的地址 静态库的不加载&#xff…
阅读更多...
数据结构——堆排序的topk问题

数据结构——堆排序的topk问题

呀哈喽&#xff0c;我是结衣 前言 今天给大家带来的堆排序的topk问题。topk就是在许多数中&#xff0c;找出前k个大的数&#xff0c;可能是几十个数&#xff0c;也可能是几千万个数中找。今天我们将要在1000000&#xff08;一百万&#xff09;个数中找出前10大的数。 知识点 C…
阅读更多...
【c】角谷猜想

【c】角谷猜想

#include<stdio.h> int coll(int x)//定义函数 {int count0;while(x>1){if(x%20){xx/2;count;}else{x3*x1;count;}}return count; } int main() {int n,num;scanf("%d",&n);int arr[n1];for(int i1;i<n;i)//输入n组数据保存到数组中{scanf("%d&…
阅读更多...
数据结构之哈希表

数据结构之哈希表

数据结构之哈希表 文章目录 数据结构之哈希表一、哈希概念二、哈希冲突三、哈希函数常见哈希函数 四、哈希冲突解决闭散列闭散列的思考线性探测线性探测的实现 二次探测 开散列开散列概念开散列的思考开散列实现 五、开散列与闭散列比较 一、哈希概念 顺序结构以及平衡树中&am…
阅读更多...
MidJourney笔记（6）-Niji模式

MidJourney笔记（6）-Niji模式

Niji模式 回顾一下，在讲解settings命令时，我们可以看到一个Niji字眼。 而且是在Midjourney V4之后才有的，那Niji到底是什么？ Niji是MidJourney中用于绘制二次元/动漫风格的模型，那Niji的V4和V5有什么区别呢？
阅读更多...
竞赛选题 ： 题目：基于深度学习的水果识别 设计 开题 技术

竞赛选题 ： 题目：基于深度学习的水果识别 设计 开题 技术

1 前言 Hi&#xff0c;大家好&#xff0c;这里是丹成学长&#xff0c;今天做一个 基于深度学习的水果识别demo 这是一个较为新颖的竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/pos…
阅读更多...
编程实战：类C语法的编译型脚本解释器（系列）

编程实战：类C语法的编译型脚本解释器（系列）

“脚本”始终是个具有独特魅力的领域&#xff0c;能够随时方便地解决一些问题&#xff0c;但脚本的随意性同时带来别的问题&#xff0c;所以脚本始终属于让人又爱又恨的存在。 很多大型系统都会嵌入一些小型的解释器&#xff0c;用来让用户亲自编写简单的逻辑规则。不幸的是&am…
阅读更多...
springCache——jetcache缓存

springCache——jetcache缓存

文章目录 jetcache远程、本地缓存方案jetcache方法注解使用方式 jetcache远程、本地缓存方案 <dependency><groupId>com.alicp.jetcache</groupId><artifactId>jetcache-starter-redis</artifactId><version>2.6.4</version></de…
阅读更多...
[c]比较月亮大小

[c]比较月亮大小

本题的难点就是分情况讨论 #include<stdio.h> int main() {int n;scanf("%d",&n);int arr2[n];int p;for(int m0;m<n-1;m){scanf("%d",&arr2[m]);//输入n个数保存到数组}if(n1)//当输入一个数据时&#xff0c;输入0&#xff0c;可以判断…
阅读更多...
Java中实现HTTPS连接的最佳实践

Java中实现HTTPS连接的最佳实践

引言 大家好&#xff01;我是小黑。今天咱们来聊聊一个既热门又实用的话题&#xff1a;在Java中如何实现HTTPS连接。现在的网络世界&#xff0c;安全性是大家都非常关注的问题&#xff0c;特别是对于咱们这些程序员来说&#xff0c;更是如此。想想看&#xff0c;如果你的网站或…
阅读更多...
【Java 基础】16 泛型

【Java 基础】16 泛型

文章目录 什么是泛型&#xff1f;泛型的声明泛型的使用泛型方法通配符和泛型上下界1&#xff09;通配符2&#xff09;泛型上下界 泛型的好处注意事项 泛型提供了一种在编写代码时更好地 支持类型安全的机制。通过泛型&#xff0c;我们可以编写更加 通用、 灵活、 可读性高的…
阅读更多...
docker 搭建开发环境，解决deepin依赖问题

docker 搭建开发环境，解决deepin依赖问题

本机环境&#xff1a; deepin v23b2 删除docker旧包 sudo apt-get remove docker docker-engine docker.io containerd runc注意卸载docker旧包的时候Images, containers, volumes, 和networks 都保存在 /var/lib/docker 卸载的时候不会自动删除这块数据&#xff0c;如果你先…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023