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,一经查实,立即删除!

相关文章

Linux 设置程序开机自启动的方法

目录 前言开机自启动参考 前言 CentOS Linux release 7.9.2009 (Core) 开机自启动 shell> vim /etc/rc.d/rc.local添加开机后执行的命令 sh /xxx/xxx.sh参考 https://www.cnblogs.com/xlmeng1988/archive/2013/05/22/3092447.html

软件工程导论学习资料

软件工程的概述&#xff1a;软件工程就是为了经济地获得可靠的且能在实际机器上有效地运行的软件&#xff0c;而建立和使用完善的工程原理。Software engineering is to establish and use sound engineering principles in order to economically obtain reliable software th…

深入理解Java中的锁机制

引言 大家好&#xff0c;我是小黑。今天咱们来聊聊Java中的锁机制&#xff0c;这可是并发编程的核心。你知道吗&#xff0c;在并发编程的世界里&#xff0c;正确地使用锁就像是掌握了一把神奇的钥匙&#xff0c;它能帮咱们在多线程的混战中保持秩序&#xff0c;防止数据被乱改…

【JavaSE】API(学习笔记)

一、Math 包含执行基本数字运算的方法没有构造方法&#xff0c;但方法是静态的&#xff0c;可以用类名直接调用 1、Math类常用方法 1&#xff09;绝对值&#xff1a;abs public static int abs(int a)2&#xff09;小数的最近整数&#xff1a;ceil(最小整数) / floor(最大整…

【AI】基于已有模型训练自己的模型(迁移)

实际工作中&#xff0c;我们可能缺乏算力去从头到尾训练一个模型&#xff0c;使用别人训练好的模型&#xff08;通常是经典模型&#xff09;就成了一个很好的选择&#xff0c;这样我们就不需要设置每一层的初始参数&#xff0c;极大的提高了训练的效率&#xff1b;但是在使用别…

Python中的加法测试题实现

随机生成5道10以内的加法测试题&#xff0c;用户在10秒内使用键盘输入答案。完成全部5道答题之后&#xff0c;计算机生成答题记录报告&#xff0c;并对答题情况进行分析&#xff0c;显示“答对了”&#xff0c;或“答错了”、并显示正确答案。如果未能按时完成&#xff0c;则显…

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): #…

Python concurrent.futures实现多进程多线程编程

Python的concurrent.futures模块可以很方便的实现多进程、多线程运行&#xff0c;减少了多进程带来的的同步和共享数据问题。 Executor是一个抽象类&#xff0c;表示一个可执行的上下文。Future则代表一个将要执行的任务&#xff0c;并提供了一些方法来获取任务的状态和结果。T…

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 …

技术面选股的方法

技术面选股是根据股票的价格走势、成交量等技术指标&#xff0c;来预测股票未来走势的一种方法。以下是一些常用的技术面选股方法的详细解析&#xff1a; 均线分析&#xff1a;这是一种常见且基础的技术面选股方法&#xff0c;投资者会计算股票的移动平均线&#xff08;如5日、…

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

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

【已解决】AttributeError: module ‘gradio‘ has no attribute ‘Image‘

问题描述 AttributeError: module gradio has no attribute Image 不知道作者用的是哪个gradio版本&#xff0c;最新的版本报错AttributeError: module gradio has no attribute outputs &#xff0c; 换一个老一点的版本会报错AttributeError: module gradio has no attribute…

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

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

排序算法总结(Python、Java)

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

华为OD机试 - CPU算力分配(Java JS Python C)

题目描述 现有两组服务器A和B,每组有多个算力不同的CPU,其中 A[i] 是 A 组第 i 个CPU的运算能力,B[i] 是 B组 第 i 个CPU的运算能力。 一组服务器的总算力是各CPU的算力之和。 为了让两组服务器的算力相等,允许从每组各选出一个CPU进行一次交换, 求两组服务器中,用于…

反序列化漏洞详解(一)

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

【笔记】常用的Linux命令之解压缩:tar、zip、rar 命令

1、tar 常用压缩和解压缩 # 压缩文件 file1 和目录 dir2 到 test.tar.gz tar -zcvf test.tar.gz file1 dir2 # 解压 test.tar.gz&#xff08;将 c 换成 x 即可&#xff09; tar -zxvf test.tar.gz 额外知识&#xff1a;查看压缩文件内容 # 列出压缩文件的内容 tar -ztvf test…

unity学习笔记

一、线段渲染器 在Unity中&#xff0c;线段渲染器&#xff08;Line Renderer&#xff09;是一种用于在场景中绘制线段的组件。线段渲染器非常适合用于创建轨迹、路径、光束等效果。 1. 创建Line Renderer&#xff1a;在Unity编辑器中&#xff0c;你可以通过创建空对象 -> …

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

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

力扣labuladong一刷day24天

力扣labuladong一刷day24天 文章目录 力扣labuladong一刷day24天一、875. 爱吃香蕉的珂珂二、1011. 在 D 天内送达包裹的能力三、410. 分割数组的最大值 一、875. 爱吃香蕉的珂珂 题目链接&#xff1a;https://leetcode.cn/problems/koko-eating-bananas/?utm_sourceLCUS&…