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

目录

前言

正文

一、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.mzph.cn/pingmian/17082.shtml

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

相关文章

常见API（JDK7时间、JDK8时间、包装类、综合练习）

常见API（JDK7时间、JDK8时间、包装类、综合练习）

一、JDK7时间——Date 1、事件相关知识点 2、Date时间类 Data类是一个JDK写好的Javabean类&#xff0c;用来描述时间&#xff0c;精确到毫秒。 利用空参构造创建的对象&#xff0c;默认表示系统当前时间。 利用有参构造创建的对象&#xff0c;表示指定的时间。 练习——时间计…
阅读更多...
刷题记录5.22-5.27

刷题记录5.22-5.27

文章目录 刷题记录5.22-5.2717.电话号码的字母组合78.子集131.分割回文串77.组合22.括号生成198.打家劫舍---从递归到记忆化搜索再到递推动态规划背包搜索模板494.目标和322.零钱兑换牛客小白月赛---数字合并线性DP1143.最长公共子序列72.编辑距离300.最长递增子序列状态机DP12…
阅读更多...
ssh远程连接的相关配置

ssh远程连接的相关配置

连接同一个局域网下&#xff1a; 正好这里来理解一下计算机网络配置中的ip地址配置细节&#xff0c; inet 172.20.10.13: 这是主机的IP地址&#xff0c;用于在网络中唯一标识一台设备。在这个例子中&#xff0c;IP地址是172.20.10.13。 netmask 255.255.255.240: 这是子网掩码…
阅读更多...
【LeetCode】力扣第 399 场周赛 优质数对的总数 II

【LeetCode】力扣第 399 场周赛 优质数对的总数 II

文章目录 1. 优质数对的总数 II 1. 优质数对的总数 II 题目链接 &#x1f34e;该题涉及的小技巧&#xff1a;&#x1f425; &#x1f427;①一次可以统计这个数的 两个因子 但是要注意 25 5 * 5&#xff0c;这种情况 5 只能统计一次噢&#x1f192; 解题思路: &#x1f427…
阅读更多...
声学特征在膝关节健康诊断中的应用分析

声学特征在膝关节健康诊断中的应用分析

关键词&#xff1a;膝关节声发射、膝关节生物标志物、因果关系、机器学习 声学膝关节健康评估长期以来一直被看作是一种替代临床可用医学成像工具的替代方法&#xff0c;如声发射技术是通过检测膝关节在运动过程中产生的微小裂纹或损伤引起的声波信号&#xff0c;从而评估关节的…
阅读更多...
Scrum 的速度如何衡量和提高

Scrum 的速度如何衡量和提高

了解你的 Scrum 团队的实际开发速度是非常多敏捷团队的诉求&#xff0c;而速度&#xff08;Velocity&#xff09;作为敏捷项目的度量工具&#xff0c;为管理者提供了对团队工作能力深入了解的机会。 这份指南将深入探讨 Scrum 中速度的概念&#xff0c;指导你如何进行计算&…
阅读更多...
GTX IP生成及参数详解（高速收发器九）

GTX IP生成及参数详解（高速收发器九）

如下图所示&#xff0c;在IP Catalog中搜索gt&#xff0c;然后双击7 Series FPGAs Transcelvers Wizard打开IP配置界面。 图1 打开7 Series FPGAs Transcelvers Wizard IP 1、配置GT Selection界面 首先进入GT Selection配置界面&#xff0c;这个界面主要关注红框部分。从前文对…
阅读更多...
BioTech - 输入 自定义复合物(Multimer)模版 使用 AlphaFold2 进行精细预测

BioTech - 输入 自定义复合物(Multimer)模版 使用 AlphaFold2 进行精细预测

欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://blog.csdn.net/caroline_wendy/article/details/139234247 参考：研发 AlphaFold2 输入自定义模版 (Template) 的接口 在 AlphaFold 预测蛋白质三维结构中，结构 模版(Template) 起着关键作用： 蛋白质结构…
阅读更多...
实战 | 使用YoloV8实例分割识别猪的姿态（含数据集）

实战 | 使用YoloV8实例分割识别猪的姿态（含数据集）

导 读 本文主要介绍如何使用YoloV8实例分割识别猪的姿态&#xff08;含数据集&#xff09;。 背景介绍 在本文中&#xff0c;我将介绍如何使用YoloV8在猪的自定义数据集上进行实例分割&#xff0c;以识别和跟踪它们的不同姿态。 数据集 使用的数据集来源于Kokkenborg Aps&…
阅读更多...
【话题】你眼中的IT行业现状与未来趋势

【话题】你眼中的IT行业现状与未来趋势

大家好&#xff0c;我是全栈小5&#xff0c;欢迎阅读小5的系列文章&#xff0c;这是《话题》系列文章 目录 引言一、IT行业的现状1.1 云计算与大数据1.2 人工智能与机器学习1.3 物联网与5G通信1.4 区块链技术 二、IT行业未来发展趋势2.1 边缘计算与智能设备2.2 深度学习与自然语…
阅读更多...
告别繁琐！Xinstall助你轻松实现APP地推结算，提升推广效率

告别繁琐！Xinstall助你轻松实现APP地推结算，提升推广效率

随着移动互联网的迅猛发展&#xff0c;APP市场竞争日益激烈。面对线上推广转化率下降、成本上升的挑战&#xff0c;越来越多的APP厂商开始尝试线下地推这一更为直接、有效的推广方式。然而&#xff0c;地推结算过程中的种种问题却让许多企业头痛不已。今天&#xff0c;我们将为…
阅读更多...
亲测使用frp获得访问者真实ip

亲测使用frp获得访问者真实ip

怎么访问都只有127.0.0.1这个内网ip,获取不到访问者的真实ip 1.打开frp的配置文件(一般是frpc.toml&#xff0c;无需设置frps.toml) 在每一个tcp协议中添加 transport.proxyProtocolVersion "v2" 实例&#xff1a; # frpc.toml [[proxies]] name "web" …
阅读更多...
CSS学习笔记：flex布局（弹性布局）

CSS学习笔记：flex布局（弹性布局）

设置flex布局 父元素添加display: flex 使用justify-content调节元素在主轴的对齐方式 给父元素添加justify-content属性&#xff0c;取值如下 用于调节子元素在主轴方向&#xff08;水平方向&#xff09;的对齐方式 使用align-items调节元素在侧轴的对齐方式 给父元素添加…
阅读更多...
华为机考入门python3--（31）牛客31-单词倒排

华为机考入门python3--（31）牛客31-单词倒排

分类&#xff1a;字符串、正则 知识点&#xff1a; 正则提取所有符合的字符串 words re.findall(r[a-zA-Z], sentence) 列表倒序 words[::-1] 题目来自【牛客】 import re # 导入正则表达式模块def reverse_words(sentence):# 使用正则表达式将句子拆分成单词# 如可以将…
阅读更多...
GM Bali，OKLink受邀参与Polygon AggIsland大会

GM Bali，OKLink受邀参与Polygon AggIsland大会

5月16日-17日&#xff0c;OKLink 受到生态合作伙伴 Polygon 的特别邀请&#xff0c;来到巴厘岛参与以 AggIsland 为主题的大会活动并发表演讲&#xff0c;详细介绍 OKLink 为 Polygon 所带来的包括多个浏览器和数据解析等方面的成果&#xff0c;并与 Polygon 一起&#xff0c;对…
阅读更多...
Apache Flink CDC 3.1.0版本知识学习

Apache Flink CDC 3.1.0版本知识学习

Apache Flink CDC 3.1.0版本知识学习 一、Flink CDC 3.1 快速预览二、Transformation 支持三、分库分表合并支持四、使用 Kafka Pipeline Sink 高效写入 Canal/Debezium 格式数据五、更高效地实时入湖 Paimon六、其他改进七、Flink CDC 3.1 版本兼容性 一、Flink CDC 3.1 快速预…
阅读更多...
phpmyadmin漏洞汇总

phpmyadmin漏洞汇总

phpmyadmin是一个非常常用的框架&#xff0c;所以学习它的常见漏洞是非常必要的。 参考大佬的文章进行自学&#xff1a;最全phpmyadmin漏洞汇总_phpmyadmin弱口令-CSDN博客 目录 phpmyadmin简介 查看phpmyadmin版本 漏洞及利用 万能密码登入 影响版本 漏洞POC 远程代码…
阅读更多...
【传知代码】无监督动画中关节动画的运动表示（论文复现）

【传知代码】无监督动画中关节动画的运动表示（论文复现）

前言&#xff1a;在数字动画的广袤领域中&#xff0c;关节动画以其真实、流畅的运动表现&#xff0c;一直占据着举足轻重的地位。无论是电影中的震撼特效&#xff0c;还是游戏世界的角色互动&#xff0c;关节动画都以其细腻的运动表现&#xff0c;赋予虚拟世界以生动与活力。然…
阅读更多...
Excel某列中有不连续的数据，怎么提取数据到新的列？

Excel某列中有不连续的数据，怎么提取数据到新的列？

这里演示使用高级筛选的例子&#xff1a; 1.设置筛选条件 在D2单元格输入公式&#xff1a;COUNTA(A4)>0 这里有两个注意事项&#xff1a; *. 公式是设置在D2单元格&#xff0c;D1单元格保持为空&#xff0c; **. 为什么公式中选A4单元格&#xff0c;A列的第一个数据在A3…
阅读更多...
CPU数据传送控制方式

CPU数据传送控制方式

引入 为了实现CPU与I/O设备信息交换的同步 无条件传送 示例1&#xff1a; 示例2&#xff1a; 程序查询方式 引入 工作过程 单个外设 多个外设 特点 中断传送方式 工作过程 特点 DMA 概述 DMAC功能 总线请求信号HOLD 总线请求响应信号HOLDA 工作过程 小结
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023