Vue的学习 —— ＜Echarts组件库技术应用＞

news2024/11/17 5:34:47

目录

前言

正文

一、ECharts技术简介

二、Vue3集成Echarts

1、安装Echarts

2、引入方式

三、Echarts基础篇

1、图表容器及大小

2、样式

2.1 颜色主题

3、坐标轴

5、数据集

5.1 在series中设置数据集

5.2 在dataset中设置数据集

四、常用图表实操

1、柱状图

2、饼图

课后作业

前言

在这个课程中，我们将学习一款强大的开源数据可视化工具——ECharts。在当今数据驱动的时代，数据可视化变得越来越重要。它能够帮助我们更好地理解和分析数据，从而做出更明智的决策。ECharts，全称Easy Chart，是一款由百度开源的数据可视化库，基于JavaScript，可以在网页中展示丰富的图表类型，如折线图、柱状图、饼图等。通过课程的学习，掌握ECharts数据可视化技术，并在实际项目开发中得心应手使用ECharts数据可视化技术，提升自身的技术能力与价值。

正文

一、ECharts技术简介

ECharts是一款基于Javascript的数据可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、Vue3集成Echarts

1、安装Echarts

使用包管理器安装Echarts命令如下：

#使用npm安装
npm i ecahrts --save
#使用yarn安装
yarn add echarts --save
2、引入方式

下面列举两种echarts引入方式，最后打印出echarts对象如下图所示，说明引入成功

  1. ES6引入方式：

    ​
<script setup>
  import * as echarts from 'echarts'
  console.log(echarts)
</script>

​

  2. App.vue 下 provide() ,子组件下 inject() 方式

<!-- App.vue -->
<template>
  <ImportDemo1></ImportDemo1>
</template>
<script setup>
import { provide } from 'vue';
import * as echarts from 'echarts'
import ImportDemo1 from './components/ImportDemo1.vue';
provide('echarts',echarts)
</script>
<!-- ImportDemo1.vue -->
<script setup>
import { inject } from 'vue';
const echarts = inject('echarts')
console.log(echarts)
</script>

三、Echarts基础篇

1、图表容器及大小

通常来说，需要在 HTML 中先定义一个 <div> 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 opts.width 或 opts.height 将其覆盖。返回值即是Echarts图表实例的容器。代码如下：

<template>
    <div id="myChart1" style="width: 600px;height: 500px;"></div>
</template>
​
<script setup>
import { inject,onMounted } from 'vue';
​
const echarts = inject('echarts')
onMounted(() => {
    // myChart1是图表实例的容器
    const myChart1 = echarts.init(document.getElementById('myChart1'))
})
​
</script>
2、样式
2.1 颜色主题

最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，可以通过切换深色模式，直接看到采用主题的效果。ECharts5 除了一贯的默认主题外，还内置了'dark'主题。可以像这样切换成深色模式：

const myChart1 = echarts.init(document.getElementById('myChart1'),'dark')
3、坐标轴

坐标轴即为直角坐标系中的 x/y 轴。x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据

普通的二维数据坐标系都有 x 轴和 y 轴，通常情况下，x 轴显示在图表的底部，y 轴显示在左侧，一般配置如下：

const option = {
  xAxis: {
    // ...
  },
  yAxis: {
    // ...
  }
};

x 轴常用来标示数据的维度，维度一般用来指数据的类别，是观察数据的角度，例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值，数值是用来具体考察某一类数据的数量值，也是我们需要分析的指标，例如“销售数量”和“销售金额”等。

const option = {
  xAxis: {
    type: 'time',
    name: '销售时间'
    // ...
  },
  yAxis: {
    type: 'value',
    name: '销售数量'
    // ...
  }
  // ...
};

在二维数据中，轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴，多于两个 x/y 轴需要通过配置 offset 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下，两个 y 轴显示在左右两侧。

const option = {
  xAxis: {
    type: 'time',
    name: '销售时间'
    // ...
  },
  yAxis: [
    {
      type: 'value',
      name: '销售数量'
      // ...
    },
    {
      type: 'value',
      name: '销售金额'
      // ...
    }
  ]
  // ...
};
5、数据集

数据集是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据，但是从 ECharts4 支持数据集开始，更推荐使用数据集来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。

5.1 在series中设置数据集
const option = {
  xAxis: {
    type: 'category',
    data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: '2015',
      data: [89.3, 92.1, 94.4, 85.4]
    },
    {
      type: 'bar',
      name: '2016',
      data: [95.8, 89.4, 91.2, 76.9]
    },
    {
      type: 'bar',
      name: '2017',
      data: [97.7, 83.1, 92.5, 78.1]
    }
  ]
};
// 渲染图表
myChart1.setOption(option);

效果：

这种方式的优点是，适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。 但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。

5.2 在dataset中设置数据集

数据设置在 数据集（dataset） 中，会有这些好处：

  • 能够贴近数据可视化常见思维方式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。

  • 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。

  • 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。

  • 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

下面是一个最简单的 dataset 的例子：

const option = {
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
  xAxis: { type: 'category' },
  // 声明一个 Y 轴，数值轴。
  yAxis: {},
  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};
// 渲染图表
myChart1.setOption(option);

四、常用图表实操

1、柱状图

需求：上周一至周日平台每日的独立访客量为 120, 200, 150, 80, 70, 110, 130，使用柱状图做数据展示。

下面演示实现方法：

  1. 在src/component目录下创建bar.vue文件，写入Vue3模板代码

    <template>
</template>
​
<script setup>
​
</script>
​
<style>
​
</style>

  2. 设置图表容器以及大小

    <template>
    <div id="myBar" style="width: 600px;height: 500px;">
​
    </div>
</template>

  3. 获取Echarts实例

    <script setup>
import * as echarts from 'echarts'
onMounted(() => {
    const myBarChart = echarts.init(document.getElementById('myBar'))
})
</script>

  4. 配置柱状图参数并渲染图表

    <script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts'
onMounted(() => {
    const myBarChart = echarts.init(document.getElementById('myBar'))
    const option = {
        title: { 
            text: '上周独立访客量',  // 设置图表标题
            left: 'center'  // 设置居中
        },
        xAxis: {
            type: 'category', // 标明X轴为类目轴
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] 
        },
        yAxis: {
            type: 'value',
            name:"/人" // y轴名称
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130], // 每个类目的数据
                type: 'bar' // 指定图表类型为柱状图
            }
        ]
    }
    myBarChart.setOption(option) // 渲染图表
})
</script>

  5. 运行效果如下：

2、饼图

需求：展示本站点用户来源占比，数据如下：

搜索引擎：1048人
直接用户：735人
电子邮件：580人
合作广告：484人
视频广告：300

  1. 在src/component目录下创建pie.vue文件，写入Vue3模板代码

    <template>
</template>
​
<script setup>
​
</script>
​
<style>
​
</style>

  2. 设置图表容器以及大小

    <template>
    <div id="myPie" style="width: 600px;height: 500px;">
​
    </div>
</template>

  3. 获取Echarts实例

    <script setup>
import * as echarts from 'echarts'
onMounted(() => {
    const myBarChart = echarts.init(document.getElementById('myPie'))
})
</script>

  4. 配置柱状图参数并渲染图表

    <script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts'
onMounted(() => {
    const myBarChart = echarts.init(document.getElementById('myPie'))
    const option = {
        title: {
            text: '本站点用户来源',  // 设置图表标题
            left: 'center'  // 设置居中
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                data: [
                    { value: 1048, name: '搜索引擎' },
                    { value: 735, name: '直接用户' },
                    { value: 580, name: '电子邮件' },
                    { value: 484, name: '合作广告' },
                    { value: 300, name: '视频广告' }
                ]
            }
        ]
    }
    myBarChart.setOption(option)
})
</script>

  5. 运行效果如下：

课后作业

根据题目需求和数据，参考Echarts官网示例：Examples - Apache ECharts选择合理的图表进行展示。

社交媒体平台希望了解用户地区分布对比，请你选择合适的图表进行展示。数据如下：

地区 用户数量 北京 150 上海 200 广州 120 深圳 130

下面是用饼图实现上述需求，代码如下：

<script setup>
import { onMounted } from 'vue';
import * as echarts from 'echarts'
onMounted(() => {
    const myBarChart = echarts.init(document.getElementById('myPie'))
    const option = {
        title: {
            text: '用户地区分布对比',  // 设置图表标题
            left: 'center'  // 设置居中
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                data: [
                    { value: 150, name: '北京' },
                    { value: 200, name: '上海' },
                    { value: 120, name: '广州' },
                    { value: 130, name: '深圳' }
                
                ]
            }
        ]
    }
    myBarChart.setOption(option)
})
</script>

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

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

相关文章

特殊变量笔记2

特殊变量笔记2

案例需求 在demo4.sh中循环打印输出所有输入参数, 体验$*与$的区别 实现步骤 编辑demo4.sh脚本文件 # 增加命令: 实现直接输出所有输入后参数 # 增加命令: 使用循环打印输出所有输入参数演示 编辑demo4.sh文件 直接输出所有输入参数, 与循环方式输出所有输入参数(使用双引…
阅读更多...
轻型web服务器搭建 阿里云

轻型web服务器搭建 阿里云

1.购买云服务器 2.远程连接云服务器 重置实例密码 重置后要重启服务器 登录云服务器 密码就是刚刚重置的 3.安装宝塔面板 宝塔面板 - 简单好用的Linux/Windows服务器运维管理面板 (bt.cn) 回车则开始安装&#xff0c;过程中会多次让输入y表示确认下一步&#xff0c;过程大概2…
阅读更多...
3D 生成重建013-ProlificDreamer将SDS拓展到VSD算法进行高质量的3D生成

3D 生成重建013-ProlificDreamer将SDS拓展到VSD算法进行高质量的3D生成

3D 生成重建013-ProlificDreamer将SDS拓展到VSD算法进行高质量的3D生成 文章目录 0论文工作1论文方法2效果 0论文工作 **分数蒸馏采样&#xff08;SDS&#xff09;**通过提取预先训练好的大规模文本到图像扩散模型&#xff0c;在文本到3d生成方面显示出了巨大的前景&#xff0…
阅读更多...
【机器学习】期望最大化（EM）算法

【机器学习】期望最大化（EM）算法

文章目录 一、极大似然估计1.1 基本原理1.2 举例说明 二、Jensen不等式三、EM算法3.1 隐变量 与 观测变量3.2 为什么要用EM3.3 引入Jensen不等式3.4 EM算法步骤3.5 EM算法总结 参考资料 EM是一种解决 存在隐含变量优化问题 的有效方法。EM的意思是“期望最大化&#xff08;Exp…
阅读更多...
初识Java--开启我的Java学习之旅

初识Java--开启我的Java学习之旅

目录 一、JAVA语言概述二、JAVA语言的重要性2.1语言使用广泛程度2.2工作领域2.3在校招岗位的需求2.4 java语言发展简史2.5Java语言特性 三、初识java的main方法四、运行java程序五、【面试题】JDK、JRE、JVM之间的关系&#xff1f; 一、JAVA语言概述 Java是一种优秀的程序设计…
阅读更多...
在线人才测评在企业招聘和大学生求职中的应用场景

在线人才测评在企业招聘和大学生求职中的应用场景

每年的春招秋招&#xff0c;都是毕业生们忙着找工作的季节&#xff0c;相比社招来说&#xff0c;春招秋招是每个毕业生务必重视的机会&#xff0c;大厂名企毕竟名额有限&#xff0c;如果找到自己心仪的职业岗位&#xff0c;作为毕业生就必须提前准备&#xff0c;深入了解招聘的…
阅读更多...
09.责任链模式

09.责任链模式

09. 责任链模式 什么是责任链设计模式&#xff1f; 责任链设计模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为设计模式&#xff0c;它允许将请求沿着处理者对象组成的链进行传递&#xff0c;直到有一个处理者对象能够处理该请求为止。这种模式的目的…
阅读更多...
docker ps显示的参数具体是什么意思

docker ps显示的参数具体是什么意思

1&#xff0c;运行一个容器 docker run -d ubuntu:15.10 /bin/sh -c "while true; do echo hello world; sleep 1; done"这段命令的作用是使用 docker run 命令运行一个基于 ubuntu:15.10 镜像的 Docker 容器&#xff0c;并在容器中执行一个无限循环的命令。 具体解…
阅读更多...
PID控制中的积分到底是什么，为什么它可以将矩形线转换为曲线？simulink搭建PID控制，积分模块1/s

PID控制中的积分到底是什么，为什么它可以将矩形线转换为曲线？simulink搭建PID控制，积分模块1/s

PID控制中的积分到底是什么&#xff0c;为什么它可以将矩形线转换为曲线&#xff0c; 这个问题呢其实道理很简单&#xff0c;用到的是初中的知识 我们做几个测试案例 如下面matlab搭建了积分1/s 那显示如下&#xff08;红色曲线相当于加速度、蓝色曲线相当于速度&#xff09;&a…
阅读更多...
从0到1！得物如何打造通用大模型训练和推理平台

从0到1！得物如何打造通用大模型训练和推理平台

1.背景 近期&#xff0c;GPT大模型的发布给自然语言处理&#xff08;NLP&#xff09;领域带来了令人震撼的体验。随着这一事件的发生&#xff0c;一系列开源大模型也迅速崛起。依据一些评估机构的评估&#xff0c;这些开源模型大模型的表现也相当不错。一些大模型的评测情况可…
阅读更多...
【MSSQL】因为数据库正在使用，所以无法获得对数据库的独占访问权” 解决方案汇总

【MSSQL】因为数据库正在使用，所以无法获得对数据库的独占访问权” 解决方案汇总

文章目录 前言一、事故现场方案一：设置数据库再单用户模式下工作：方案二：利用SQL语句，断开所有用户连接，并回滚所有事务，具体SQL语句如下：方案三：利用SQL语句，杀死正在使用该数据库的所有进程方案四：修改数据库的登录密码或重启数据库服务(不太建议)二、结尾日志备份…
阅读更多...
MDS800-16-ASEMI整流模块800A 1600V

MDS800-16-ASEMI整流模块800A 1600V

编辑&#xff1a;ll MDS800-16-ASEMI整流模块800A 1600V 型号&#xff1a;MDS800-16 品牌&#xff1a;ASEMI 封装&#xff1a;MDS 批号&#xff1a;2024 分类&#xff1a;整流模块 特性&#xff1a;整流模块、整流桥 平均正向整流电流&#xff08;Id&#xff09;&#…
阅读更多...
C语言实现Hash Map(2)：Map代码实现详解

C语言实现Hash Map(2)：Map代码实现详解

在上一节C语言实现Hash Map(1)&#xff1a;Map基础知识入门中&#xff0c;我们介绍了Map的基础概念和在C中的用法。但我写这两篇文章的目的是&#xff0c;能够在C语言中实现这样的一个数据结构&#xff0c;毕竟有时我们的项目中可能会用到Map&#xff0c;但是C语言库中并没有提…
阅读更多...
香蕉成熟度检测YOLOV8NANO

香蕉成熟度检测YOLOV8NANO

香蕉成熟度检测YOLOV8NANO&#xff0c;采用YOLOV8NANO训练&#xff0c;得到PT模型&#xff0c;然后转换成ONNX模型&#xff0c;让OEPNCV调用&#xff0c;从而摆脱PYTORCH依赖&#xff0c;支持C。python&#xff0c;安卓开发。能检测六种香蕉类型freshripe freshunripe overripe…
阅读更多...
下载CentOS系统或者下载Ubuntu系统去哪下？

下载CentOS系统或者下载Ubuntu系统去哪下？

因为Centos官网是挂在国外的服务器上&#xff0c;下载镜像时相比于国内的下载速度会慢很多&#xff0c;分享国内的镜像站去阿里巴巴下载Centos镜像。 首先分享两种下载方式&#xff0c;如果只想下载Centos那么就访问方式一的下载地址即可&#xff0c;如果还想下载其他的系统&a…
阅读更多...
Xfce4桌面背景和桌面图标消失问题解决@FreeBSD

Xfce4桌面背景和桌面图标消失问题解决@FreeBSD

问题&#xff1a;Xfce4桌面背景和桌面图标消失 以前碰到过好几次桌面背景和桌面图标消失&#xff0c;整个桌面除了上面一条和下面中间的工具条&#xff0c;其它地方全是黑色的问题&#xff0c;但是这次重启之后也没有修复&#xff0c;整个桌面乌黑一片&#xff0c;啥都没有&am…
阅读更多...
[书生·浦语大模型实战营]——第二节：轻松玩转书生·浦语大模型趣味 Demo

[书生·浦语大模型实战营]——第二节：轻松玩转书生·浦语大模型趣味 Demo

1. 部署InternLM2-Chat-1.8B 模型进行智能对话 1.1配置环境 创建开发机 Intern Studio 官网网址&#xff1a;https://studio.intern-ai.org.cn/ 进入官网后&#xff0c;选择创建开发机&#xff0c;填写 开发机名称 后&#xff0c;点击 选择镜像 使用 Cuda11.7-conda 镜像&am…
阅读更多...
楼房vr安全逃生模拟体验让你在虚拟环境中亲身体验火灾的紧迫与危险

楼房vr安全逃生模拟体验让你在虚拟环境中亲身体验火灾的紧迫与危险

消防VR安全逃生体验系统是深圳VR公司华锐视点引入了前沿的VR虚拟现实、web3d开发和多媒体交互技术&#xff0c;为用户打造了一个逼真的火灾现场应急逃生模拟演练环境。 相比传统的消防逃生模拟演练&#xff0c;消防VR安全逃生体验系统包含知识讲解和模拟实训演练&#xff0c;体…
阅读更多...
码蹄集部分题目（2024OJ赛16期；单调栈集训+差分集训）

码蹄集部分题目（2024OJ赛16期；单调栈集训+差分集训）

&#x1f9c0;&#x1f9c0;&#x1f9c0;单调栈集训 &#x1f96a;单调栈 单调递增栈伪代码&#xff1a; stack<int> st; for(遍历数组) {while(栈不为空&&栈顶元素大于当前元素)//单调递减栈就是把后方判断条件变为小于等于即可{栈顶元素出栈;//同时进行其他…
阅读更多...
C语言笔记22 •结构体•

C语言笔记22 •结构体•

C语言结构体 1.结构体类型的声明 struct Stu { char name[ 20 ]; // 名字 int age; // 年龄 char sex[ 5 ]; // 性别 char id[ 20 ]; // 学号 }; 2.结构体变量的创建和初始化 #include <stdio.h>// 定义一个结构体类型 Point struct Point {int x;int y; };i…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023