【ECharts】数据可视化

目录

  • ECharts介绍
  • ECharts 特点
  • Vue2使用EChats步骤
    • 安装 ECharts
    • 引入 ECharts
    • 创建图表容器
    • 初始化图表
    • 更新图表
  • 示例
    • 基本柱状图
      • 后台代码
      • vue2代码
        • 配置
      • 组件代码
      • 运行效果
    • 基本折线图
      • 示例代码
        • 组件
    • 基础饼图
      • 示例代码
        • 后台
        • 前端配置
        • 组件
        • 运行效果
    • 其他

ECharts介绍

  • ECharts 是一个由百度开发和维护的开源的可视化图表库。
  • 它提供了丰富的图表类型和交互功能,可以用于创建各种类型的数据可视化图表,包括折线图、柱状图、饼图、散点图、雷达图、地图等。
    在这里插入图片描述在这里插入图片描述

ECharts 特点

  1. 强大的兼容性:ECharts 可以在主流的浏览器上运行,包括 Chrome、Firefox、Safari、IE8+ 等。

  2. 灵活的配置选项:ECharts 提供丰富的配置选项,可以自定义图表的样式、布局、标签、动画等,以满足不同的需求。

  3. 丰富的交互功能:ECharts 支持多种交互方式,如鼠标悬停、点击、拖拽等,可以实现图表的联动、筛选、缩放等交互效果。

  4. 多维度的数据展示:ECharts 支持多维度的数据可视化,可以通过数据的不同维度来展示数据的关联性、分布情况等。

  5. 可视化的配置工具:ECharts 提供了一个可视化的配置工具,可以通过拖拽和编辑来创建和调整图表,让非开发人员也能轻松使用。

总的来说,ECharts 是一个功能强大、灵活易用的数据可视化图表库,广泛应用于数据分析、商业报表、可视化大屏等领域。

Vue2使用EChats步骤

在 Vue2 中使用 ECharts 需要进行以下几个步骤:

安装 ECharts

可以通过 npm 或者 CDN 的方式安装 ECharts。如果使用 npm,可以在项目目录下运行以下命令安装 ECharts:

npm install echarts --save
//或者
npm install echarts@4.8.0 --save

引入 ECharts

main.js中加入以下配置

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

创建图表容器

在 Vue 的模板中创建一个用于显示图表的容器元素。

<template><div id="chart" style="width:50%;height: 300px;border: 1px solid blue"></div>
</template>

初始化图表

在 Vue 的方法中初始化 ECharts,通过 ECharts 的实例来配置和渲染图表。

export default {mounted() {this.initChart()},methods: {initChart() {// 获取容器元素const chartContainer = document.getElementById('chart')// 创建图表实例const chart = echarts.init(chartContainer)// 配置图表const option = {// 图表的配置项}// 渲染图表chart.setOption(option)}}
}

上述代码中,通过 mounted 钩子函数来在组件挂载后调用 initChart 方法初始化图表。在 initChart 方法中,通过 echarts.init 方法创建图表实例,并通过 setOption 方法将配置项应用到图表中。

更新图表

如果需要在组件中根据数据的变化来更新图表,可以在相应的方法中调用 setOption 方法来更新图表的数据。

export default {methods: {updateChart() {const chart = echarts.getInstanceByDom(document.getElementById('chart'))// 更新图表的配置项const option = {// 新的配置项}// 更新图表chart.setOption(option)}}
}

通过以上步骤,你可以在 Vue2 中使用 ECharts 来创建和更新图表。记得在组件销毁时调用 dispose 方法来销毁图表实例,以释放资源。

export default {beforeDestroy() {const chart = echarts.getInstanceByDom(document.getElementById('chart'))chart.dispose()}
}

示例

基本柱状图

  • 柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。
  • 设置柱状图的方式,是将 series 的 type 设为 ‘bar’。

后台代码

@RestController
@RequestMapping("/bill")
@CrossOrigin
public class BillController {@RequestMapping("/product")public Object bill(){Map<String,Object> resultMap = new HashMap<>();List<String> productNameList = new ArrayList<>();List<Integer> productNumberList = new ArrayList<>();Collections.addAll(productNameList,"电脑","鼠标","键盘","鼠标垫","显示器","扩展屏");Collections.addAll(productNumberList,200,220,317,211,179,302);resultMap.put("xMap",productNameList);resultMap.put("seriesMap",productNumberList);return resultMap;}
}

vue2代码

在这里插入图片描述

配置

serverConfig.js:后台url路径

const baseurl = {dev: 'http://192.168.2.220:9006',
}
export default baseurl

request.js:配置axios

import axios from 'axios'
import baseurl from '@/utils/serverConfig'// create an axios instance
const service = axios.create({baseURL: baseurl.dev, // url = base url + request urlwithCredentials: false, // 是否跨域timeout: 60000 // 请求超时
})export default service

bill.js:访问后台bill模块的接口文件

import request from '@/utils/request'
function getBillProductData() {return request({url: '/bill/product',method: 'post',//params})
}export default {getBillProductData,
}

组件代码

<template><div id="chart" style="width:50%;height: 300px;border: 1px solid blue"></div>
</template><script>
import billReq from '@/api/bill'
export default {name: "MyEChart",mounted() {this.initData()},data() {return {}},methods: {initData() {billReq.getBillProductData().then(response=>{//const resultJson = JSON.stringify(response.data);this.createEcharts(response.data.xMap,response.data.seriesMap);})},createEcharts(x,s) {let options = {//配置项tooltip: {//鼠标触摸显示值trigger: "axis",axisPointer: {type: 'shadow'}},xAxis: {//x轴设置data: x},yAxis: {},//y轴设置series: [{type:'bar',data:s}]}// 获取容器元素var chartContainer = document.getElementById('chart')// 创建图表实例var chart = this.$echarts.init(chartContainer)// 渲染图表chart.setOption(options)window.addEventListener("resize", function () {chart.resize(); //图表自适应的一个方法});}}
}
</script><style scoped></style>

运行效果

在这里插入图片描述

基本折线图

折线图主要用来展示数据项随着时间推移的趋势或变化。

示例代码

组件
<template><div id="chart" style="width:50%;height: 300px;border: 1px solid blue"></div>
</template><script>
import billReq from '@/api/bill'
export default {name: "ZheEChart",mounted() {this.initData()},data() {return {}},methods: {initData() {billReq.getBillProductData().then(response=>{//const resultJson = JSON.stringify(response.data);this.createEcharts(response.data.xMap,response.data.seriesMap);})},createEcharts(x,s) {let options = {//配置项tooltip: {//鼠标触摸显示值trigger: "axis",axisPointer: {type: 'shadow'}},xAxis: {//x轴设置type:'category',data: x},yAxis: {type:'value'},//y轴设置series: [{type:'line',data:s}]}// 获取容器元素var chartContainer = document.getElementById('chart')// 创建图表实例var chart = this.$echarts.init(chartContainer)// 渲染图表chart.setOption(options)window.addEventListener("resize", function () {chart.resize(); //图表自适应的一个方法});}}
}
</script><style scoped></style>

在这里插入图片描述

基础饼图

  • 饼图主要用于表现不同类目的数据在总和中的占比。
  • 每个的弧度表示数据数量的比例。
  • 饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中。

示例代码

后台
    @RequestMapping("/bing")public Object bing(){List<Map<String,Object>> resultList = new ArrayList<>();Map<String,Object> resultMap1 = new HashMap<>();resultMap1.put("name","鼠标");resultMap1.put("value","45");Map<String,Object> resultMap2 = new HashMap<>();resultMap2.put("name","鼠标垫");resultMap2.put("value","35");Map<String,Object> resultMap3 = new HashMap<>();resultMap3.put("name","键盘");resultMap3.put("value","512");Map<String,Object> resultMap4 = new HashMap<>();resultMap4.put("name","显示器");resultMap4.put("value","233");Collections.addAll(resultList,resultMap1,resultMap2,resultMap3,resultMap4);return resultList;}
前端配置
import request from '@/utils/request'
function getBillProductData() {return request({url: '/bill/product',method: 'post',//params})
}
function getBillProductBing() {return request({url: '/bill/bing',method: 'post',//params})
}export default {getBillProductData,getBillProductBing,
}
组件
<template><div id="chart" style="width:50%;height: 300px;border: 1px solid blue"></div>
</template><script>
import billReq from '@/api/bill'
export default {name: "BingEChart",mounted() {this.initData()},data() {return {}},methods: {initData() {billReq.getBillProductBing().then(response=>{//const resultJson = JSON.stringify(response.data);this.createEcharts(response.data);})},createEcharts(s) {let options = {//配置项tooltip: {//鼠标触摸显示值trigger: "axis",axisPointer: {type: 'shadow'}},series: [{type:'pie',data:s}]}// 获取容器元素var chartContainer = document.getElementById('chart')// 创建图表实例var chart = this.$echarts.init(chartContainer)// 渲染图表chart.setOption(options)window.addEventListener("resize", function () {chart.resize(); //图表自适应的一个方法});}}
}
</script><style scoped></style>
运行效果

在这里插入图片描述

其他

更多内容,参考官网,很详细,很适合学习
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

设计模式5——抽象工厂模式

写文章的初心主要是用来帮助自己快速的回忆这个模式该怎么用&#xff0c;主要是下面的UML图可以起到大作用&#xff0c;在你学习过一遍以后可能会遗忘&#xff0c;忘记了不要紧&#xff0c;只要看一眼UML图就能想起来了。同时也请大家多多指教。 抽象工厂模式&#xff08;Abst…

Flyway SpringBoot中使用

Flyway 一、 介绍 通过版本化数据库&#xff0c;提高数据库迁移的可靠性。即启动项目时就按版本执行sql脚本&#xff0c;实现数据库自动迁移。 Flyway是一款开源的数据库版本管理工具&#xff0c;它能够实现数据库迁移和版本控制。Flyway通过SQL脚本或Java代码进行数据库变更…

Java入门基础学习笔记34——方法重载

方法重载&#xff1a; 一个类中&#xff0c;出现多个方法的名称相同&#xff0c;但是它们的形参列表是不同的&#xff0c;那么这个方法就叫方法重载。 例&#xff1a; package cn.ensource.overload;public class MethodOverloadDemo1 {public static void main(String[] ar…

营收净利双降、股东减持,大降价也救不了良品铺子

号称“高端零食第一股”的良品铺子(603719.SH)&#xff0c;正遭遇部分股东的“用脚投票”。 5月17日晚间&#xff0c;良品铺子连发两份减持公告&#xff0c;其控股股东宁波汉意创业投资合伙企业、持股5%以上股东达永有限公司&#xff0c;两者均计划减持。 其中&#xff0c;宁…

react实现table可拖拽表头(给react-jss样式传递参数、滚动条样式)

目录 react实现table可拖拽表头安装依赖resizableTitle / index.tsxdrapTable.tsx使用DragTable 组件滚动条样式效果 react实现table可拖拽表头 安装依赖 yarn add react-resizable yarn add react-jssresizableTitle / index.tsx import { createUseStyles } from react-js…

Threejs路径规划_基于A*算法案例完整版

上节利用了A*实现了基础的路径规划&#xff0c;这节把整个功能完善好&#xff0c;A*算法一方面是基于当前点找到可以到达的点&#xff0c;计算从出发点到此点&#xff0c;以及此点到目的地的总成本&#xff0c;比较出最小的那个&#xff0c;再用最小成本的点继续找到它可以到达…

【网络版本计算器的实现】

本章重点 理解应用层的作用, 初识HTTP协议理解传输层的作用, 深入理解TCP的各项特性和机制对整个TCP/IP协议有系统的理解对TCP/IP协议体系下的其他重要协议和技术有一定的了解学会使用一些分析网络问题的工具和方法 ⭐注意!! 注意!! 注意!! 本课是网络编程的理论基础.是一个服务…

C++:vector基础讲解

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;vector基础讲解》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 如果本篇文章对你有帮助&#xff0c;还请各位点点赞&#xff01;&#…

面试问题小结

说说你的项目&#xff0c;从里面学到啥了&#xff08;随便说&#xff09; CAS 线程池 的各个方面 线程咋创建&#xff08;4种方式&#xff09; 说一下聚集索引和非聚集索引 50w男 50w女 &#xff0c;在B树中咋存储的&#xff08;类似下面的图&#xff0c;变通一下就行了&a…

掌握代码注释:提升代码可读性的秘密武器

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、为什么我们需要注释&#xff1f; 二、如何添加单行注释&#xff1f; 使用井号 # 添加单…

Java - AbstractQueuedSynchronizer

AQS简介 AQS全称AbstractQueuedSynchronizer&#xff0c;抽象队列同步器&#xff0c;是一个实现同步组件的基础框架。AQS使用一个int类型的成员变量state维护同步状态&#xff0c;通过内置的同步队列&#xff08;CLH锁、FIFO&#xff09;完成线程的排队工作&#xff0c;底层主…

基于C++实现观察者模式

目录 1.观察者模式 2.看看代码吧 1.观察者模式 观察者模式&#xff1a;定义一种 一&#xff08;被观察&#xff09;对多 &#xff08;观察&#xff09;的关系。在被观察类发生某种事件时&#xff0c;观察类需要做出反应。 实现方式&#xff1a; 在被观察者类里定义一个表示…

【设计模式深度剖析】【5】【创建型】【原型模式】| 类比群发邮件,加深理解

&#x1f448;️上一篇:建造者模式 | 下一篇:创建型设计模式对比&#x1f449;️ 目录 原型模式(Prototype Pattern)概览定义英文原话直译 3个角色类图1. 抽象原型&#xff08;Prototype&#xff09;角色2. 具体原型&#xff08;Concrete Prototype&#xff09;角色3. 客户…

Xline社区会议Call Up|在 CURP 算法中实现联合共识的安全性

为了更全面地向大家介绍Xline的进展&#xff0c;同时促进Xline社区的发展&#xff0c;我们将于2024年5月31日北京时间11:00 p.m.召开Xline社区会议。 欢迎您届时登陆zoom观看直播&#xff0c;或点击“阅读原文”链接加入会议&#xff1a; 会议号: 832 1086 6737 密码: 41125…

51-52 Generalized Predictive Model for Autonomous Driving,通用自动驾驶预测模型

24年3月&#xff0c;上海AI Lab联合香港科技大学、香港大学等发布Generalized Predictive Model for Autonomous Driving。作者提出了通用的大规模自动驾驶视频预测模型GenAD&#xff0c;在实现过程中&#xff0c;进一步提出了迄今为止最大的自动驾驶场景训练数据集OpenDV-2K。…

IPv6 编址类型

IPv6 地址的三种类型 单播地址 在单播寻址模式下&#xff0c;IPv6 接口 (host) 在网段中唯一标识。 IPv6 数据包包含源 IP 地址和目标 IP 地址。 主机接口配备有在该网络段中唯一的 IP 地址。当网络交换机或路由器接收到注定到单个主机的单播 IP 分组时&#xff0c;它发出其连…

【论文复现】——基于欧式聚类的车载点云道路提取

目录 一、算法原理1、论文概述2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接,爬虫自重。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫与GPT生成的文章。 一、算法原理 1、论文概述 针对车载激光点云道路信息提取的问题,提出了一…

基于STM32实现智能空气质量监测系统

目录 文章主题环境准备智能空气质量监测系统基础代码示例&#xff1a;实现智能空气质量监测系统 配置传感器并读取数据数据处理与显示数据存储与传输应用场景&#xff1a;室内环境监测与空气质量控制问题解决方案与优化收尾与总结 1. 文章主题 文章主题 本教程将详细介绍如何…

数据防泄漏系统哪个好用,给文件加密的软件

数据防泄露&#xff08;Data Leakage Prevention&#xff0c;DLP&#xff09;是指通过一定的技术手段&#xff0c;防止组织指定&#xff08;重要或敏感的&#xff09;数据或信息资产以违反安全策略规定的形式流出组织的一种策略。 信息防泄露以文档加密技术为核心&#xff0c;…

商品属性组管理

文章目录 1.数据库表设计1.在sunliving_commodity数据库中创建商品属性表2.插入测试数据 2.renren-generator生成CRUD1.配置renren-generator生成代码1.application.yml 配置数据库连接2.generator.properties 配置生成器3.根据端口访问生成器服务 http://localhost:81/4.生成代…