当前位置： 首页 > news >正文

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

news 来源：原创 2024/9/20 15:04:49

目录

前言

正文

一、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>

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 简单介绍十款可以免费使用的API测试工具
  • WebRTC-SFU服务器-Janus部署【保姆级部署教程】
  • Simulate Ring Resonator in INTERCONNECT
  • Codeforces Round 821 (Div. 2) C. Parity Shuffle Sorting （构造之全变成一样的）
  • 好用的c++11语言特性
  • Python筑基之旅-文件(夹)和流
  • docker-compose 自动管理 数据库
  • 2024/05/25学习记录
  • 20240526每日后端---------分享一些开发必备网站
  • docker安装Elasticsearch（ES）详细教程
  • 2024电工杯参赛经历感受总结
  • PyTorch深度学习实战（44）——基于 DETR 的目标检测模型
  • C++设计模式之单例模式、模板模式、状态模式、原型模式、CRTP 模式、组件模式、观察者模式、发布-订阅模式、访问者模式
  • three.js能实现啥效果？看过来，这里都是它的菜（10）
  • string OJ题
  • ［nginx文档翻译系列］ 控制nginx
  • 【个人向】《HTTP图解》阅后小结
  • ➹使用webpack配置多页面应用(MPA)
  • Java IO学习笔记一
  • Javascript 原型链
  • JavaWeb(学习笔记二)
  • java第三方包学习之lombok
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • Python 反序列化安全问题（二）
  • python 学习笔记 - Queue Pipes，进程间通讯
  • Python连接Oracle
  • windows下使用nginx调试简介
  • 得到一个数组中任意X个元素的所有组合 即C(n,m)
  • 浮现式设计
  • 构建工具 - 收藏集 - 掘金
  • 基于Android乐音识别(2)
  • 浏览器缓存机制分析
  • 设计模式 开闭原则
  • 使用Gradle第一次构建Java程序
  • 我感觉这是史上最牛的防sql注入方法类
  • 小程序 setData 学问多
  • 译有关态射的一切
  • 自制字幕遮挡器
  • No resource identifier found for attribute,RxJava之zip操作符
  • k8s使用glusterfs实现动态持久化存储
  • kubernetes资源对象--ingress
  • 新年再起“裁员潮”，“钢铁侠”马斯克要一举裁掉SpaceX 600余名员工 ...
  • ​ubuntu下安装kvm虚拟机
  • ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException
  • #图像处理
  • #微信小程序：微信小程序常见的配置传旨
  • #我与Java虚拟机的故事#连载06：收获颇多的经典之作
  • #我与Java虚拟机的故事#连载18：JAVA成长之路
  • $.proxy和$.extend
  • $L^p$ 调和函数恒为零
  • （1）(1.9) MSP (version 4.2)
  • （1）安装hadoop之虚拟机准备（配置IP与主机名）
  • （3）nginx 配置(nginx.conf)
  • （9）STL算法之逆转旋转
  • (bean配置类的注解开发)学习Spring的第十三天