【ECharts】数据可视化

news2025/3/15 14:49:48

目录

  • 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 url
  withCredentials: 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.coloradmin.cn/o/1695168.html

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

相关文章

找不到msvcr110.dll无法继续执行代码的原因分析及解决方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是找不到msvcr110.dll文件。这个错误通常发生在运行某些程序或游戏时&#xff0c;系统无法找到所需的动态链接库文件。为了解决这个问题&#xff0c;下面我将介绍5种常见的解决方法。 一&#…

重学java 44.多线程 Lock锁的使用

昨日之深渊&#xff0c;今日之浅谈 —— 24.5.25 一、Lock对象的介绍和基本使用 1.概述 Lock是一个接口 2.实现类 ReentrantLock 3.方法 lock()获取锁 unlock()释放锁 4.Lock锁的使用 package S78Lock;import java.util.concurrent.locks.Lock; import java.util.concurrent.lo…

类与对象:接口

一.概念 接口&#xff08;英文&#xff1a;Interface&#xff09;&#xff0c;在JAVA编程语言中是一个抽象类型&#xff0c;是抽象方法的集合&#xff0c;接口通常以interface来声明。 二.语法规则 与定义类相似&#xff0c;使用interface关键词。 Idea可以在开始时直接创建…

【控制实践——二轮平衡车】【三】基于PID的直立控制

传送门 系列博客前言直立运动分析基于PID控制器的直立控制角度环控制角速度控制总结 电机转速的控制前言电机转速控制 结语 系列博客 【控制实践——二轮平衡车】【一】运动分析及动力学建模 【控制实践——二轮平衡车】【二】实物设计和开源结构&代码 【控制实践——二轮…

常见 JVM 面试题补充

原文地址 : 26 福利&#xff1a;常见 JVM 面试题补充 (lianglianglee.com) CMS 是老年代垃圾回收器&#xff1f; 初步印象是&#xff0c;但实际上不是。根据 CMS 的各个收集过程&#xff0c;它其实是一个涉及年轻代和老年代的综合性垃圾回收器。在很多文章和书籍的划分中&…

Scrapy顺序执行多个爬虫

Scrapy顺序执行多个爬虫 有两种方式&#xff1a; 第一种&#xff1a;bat方式运行 新建bat文件 cd C:\python_web\spiders\tiktokSelenium & C: & scrapy crawl spider1 & scrapy crawl spider2 & scrapy crawl spider3 & scrapy crawl spider4 第二种&a…

kubeadm部署k8s v1.28

一、主机准备 主机硬件配置说明 作用IP地址操作系统配置k8s-master01192.168.136.55openEuler-22.03-LTS-SP12颗CPU 4G内存 50G硬盘k8s-node01192.168.136.56openEuler-22.03-LTS-SP12颗CPU 4G内存 50G硬盘k8s-node02192.168.136.57openEuler-22.03-LTS-SP12颗CPU 4G内存 50G…

windows 11上自带时间管理-番茄工作法

在 Windows 11 中&#xff0c;你可以使用 专注 功能来最大程度地减少干扰&#xff0c;帮助你保持专注。 专注的工作原理 专注时段打开后&#xff0c;将会出现以下情况&#xff1a; 专注计时器将显示在屏幕上 请勿打扰将打开 任务栏中的应用不会闪烁发出提醒 任务栏中应用的…

MySQL 8.4.0 LTS 变更解析:I_S 表、权限、关键字和客户端

↑ 关注“少安事务所”公众号&#xff0c;欢迎⭐收藏&#xff0c;不错过精彩内容~ MySQL 8.4.0 LTS 已经发布 &#xff0c;作为发版模型变更后的第一个长期支持版本&#xff0c;注定要承担未来生产环境的重任&#xff0c;那么这个版本都有哪些新特性、变更&#xff0c;接下来少…

UIKit之猜图器Demo

需求 实现猜图器Demo 功能分解&#xff1a; 1>下一题切换功能 2>点击图片后能放大并背景变暗&#xff08;本质是透明度的变化&#xff09;。再次点击则缩小&#xff0c;删除暗色背景。 3> 答案区按钮点击则文字消失&#xff0c;选择区对应文字恢复。 4> 选择区…

python爬虫登录到海康相机管理页面

简述 1.最近接到个任务是在管理页面更改相机的某个参数&#xff0c;下载官方的sdk貌似没有提供这个接口&#xff0c;所以只能自己写爬虫登录发请求了。 1.主要步骤 1.1 发送get请求获取到salt&#xff0c;sessionID&#xff0c;challenge等信息 http://admin:123456192.168.…

将 MOV 转换为 MP4 的 10 个最佳工具

在当今的数字时代&#xff0c;内容创作和消费正处于巅峰&#xff0c;对多功能和兼容媒体格式的需求从未如此之高。在众多可用的视频格式中&#xff0c;MOV 和 MP4 因其在各种设备和平台中的广泛使用而脱颖而出。然而&#xff0c;将 MOV 文件转换为更通用兼容的 MP4 格式的需求已…

OZON的物流有哪些,OZON物流Unitrade

随着跨境电商的快速发展&#xff0c;OZON作为俄罗斯领先的电商平台&#xff0c;其物流服务的重要性不言而喻。对于卖家而言&#xff0c;选择合适的物流合作伙伴&#xff0c;不仅关乎商品的运输效率&#xff0c;更直接关系到店铺的口碑和消费者的购物体验。本文将带您深入了解OZ…

傲软抠图一款专为抠图打造的AI智能抠图应用,智能识别人物物体抠图软件,无广vip版 v1.8.1

软件介绍 傲软抠图&#xff0c;作为一款高度专业化的智能人工智能图片处理软件&#xff0c;被设计专门用于执行精确的图像提取功能。该程序利用其先进的算法能动地识别和分辨图像中的人物或物体轮廓&#xff0c;并能够从原始图片材料中分离出带有透明背景的目标图像。除了自动…

容器化:ES和Kibana

1 缘起 最近在学习使用ES&#xff0c; 为了找一个功能强大的可视化工具&#xff0c;之前使用了ES-Head&#xff0c;可以满足学习需求。 闲暇时间又折腾了另一个工具Kibana&#xff0c; 分享如下。 Kibana优点&#xff1a; 用户友好性&#xff1a;Kibana提供直观易用的用户界面…

IC卡水表抄表是什么?什么叫IC卡水表抄表?

一、什么叫IC卡水表抄表 IC卡水表抄表是一种现代化水资源管理方法&#xff0c;主要是通过集成智能IC卡科技的水表开展计量检定和传送数据。用户在预付模式中&#xff0c;根据IC卡在线充值后再用&#xff0c;用水量会自动保存在卡上&#xff0c;大大提高了抄表效率精确性。 二…

机器学习预测-CNN手写字识别

介绍 这段代码是使用PyTorch实现的卷积神经网络&#xff08;CNN&#xff09;&#xff0c;用于在MNIST数据集上进行图像分类。让我一步步解释&#xff1a; 导入库&#xff1a;代码导入了必要的库&#xff0c;包括PyTorch&#xff08;torch&#xff09;、神经网络模块&#xff0…

STM32H743的FDCAN使用方法(1):STM32CubeMX初始化代码生成

0 工具准备 1.STM32CubeMX1 前言 本文介绍基于STM32CubeMX&#xff0c;使用stm32h743xi的对FDCAN2进行配置的方法。 2 初始化代码生成 2.1 选择FDCAN引脚 本例选择PB5、PB6作为FDCAN2的RX、TX引脚。 2.2 选择FDCAN时钟源 本例选择PLL2Q作为FDCAN时钟源&#xff0c;频率…

Redis(1)-Jedis连接配置

问题 阿里云安装并启用Redis后&#xff0c;尝试在本地用Jedis调用&#xff0c;发现报错 public class Jedis01 {Testpublic void connect(){Jedis jedis new Jedis("101.37.31.211", 6379); // 公网ipjedis.auth("123"); // 密码String ping jedis.pin…

可转债日内自动T+0交易,行情推送+策略触发+交易接口

说明 目前这个项目已编译打包,下载即可测试,直接生成多平台可执行文件&#xff0c;详见运行方法。行情部分与策略弱相关&#xff0c;拆分解耦单独作为一个项目。行情项目请移步GitHub - freevolunteer/hangqing: A股行情订阅工具&#xff0c;支持股票/可转债level2/level2数据&…