【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.mzph.cn/bicheng/15449.shtml

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

相关文章

spring模块(一)容器(4)ApplicationContextAware

一、介绍 1、问题引入 为了获取已被实例化的Bean对象,如果使用再次加载配置文件的方法,可能会出现一个问题,如一些线程配置任务, 会启动两份,产生了冗余. ApplicationContext appContext new ClassPathXmlApplicationContext("applicationContext.xml"); UserS…

python 多线程处理图片

thread for i in range(len(ori_path)):for filename in os.listdir(ori_path[i]):number_img number_img 1print("正在处理第" str(number_img) "张图片")img_name ori_path[i] filenamet Thread(target deal_one_img, args [img_name, filenam…

使用.net core 调用C#WebService的三种方式

WebSerrvic代码&#xff1a; [WebMethod]public string Test(string p1, string p2){return p1 "_" p2;} 以下是 SOAP 1.2 请求和响应示例。所显示的占位符需替换为实际值。 POST /Service1.asmx HTTP/1.1 Host: localhost Content-Type: text/xml; charsetutf-8…

unity 制作app实现底部导航栏和顶部状态栏

前段时间在用unity制作一个app&#xff0c;发现有个问题用unity制作的app&#xff0c;他默认是没有顶部状态栏的&#xff0c;也没有底部的导航栏&#xff0c;是一个全部覆盖的状态。但仔细观察可以发现&#xff0c;正常app&#xff0c;顶部状态栏是有的&#xff0c;而且是透明的…

软件设计师备考 | 案例专题之数据库设计 概念与例题

相关概念 关注上图中的两个部分&#xff1a; 概念结构设计 设计E-R图&#xff0c;也即实体-联系图。 工作步骤&#xff1a;选择局部应用、逐一设计分E-R图、E-R图合并。进行合并时&#xff0c;它们之间存在的冲突主要有以下3类&#xff1a; 属性冲突。同一属性可能会存在于…

低功耗蓝牙模块轻松实现智能防丢器

低功耗蓝牙模块&#xff0c;作为集成蓝牙无线技术功能的PCBA板&#xff0c;主要用于短距离无线通讯&#xff0c;已经成为物联网无线传输发展的中坚力量。随着蓝牙技术不断更新换代&#xff0c;越来越多的智能可穿戴设备出现在我们的生活中&#xff0c;智能手环&#xff0c;智能…

电商公司需不需要建数字档案室呢

建立数字档案室对于电商公司来说是非常有必要的。以下是一些原因&#xff1a; 1. 空间节约&#xff1a;数字档案室可以将纸质文件转化为电子文件&#xff0c;节省了大量存储空间。这对于电商公司来说尤为重要&#xff0c;因为他们通常会有大量的订单、客户信息和供应商合同等文…

Java面向对象程序设计-Hash表

以下为翁恺老师在3.4Hash表中的示例代码&#xff1a; package coins;import java.util.HashMap; import java.util.Scanner;public class Coin {private HashMap<Integer,String> coinnamesnew HashMap<Integer,String>();public Coin(){coinnames.put(1,"pe…

贷款业务——还款方式以及计算公式对比

文章目录 等额本息等额本金先息后本&#xff08;按月付息&#xff0c;到期还本&#xff09;到期一次还本付息等本等息&#xff08;等额等息&#xff09;等本等息&#xff08;砍头息&#xff09; 等额本息 等额本息&#xff1a;借款人每月还的金额固定&#xff08;本金利息总额…

力扣538. 把二叉搜索树转换为累加树

Problem: 538. 把二叉搜索树转换为累加树 文章目录 题目描述思路复杂度Code 题目描述 思路 利用二叉搜索树中序遍历的特性&#xff0c;**降序遍历&#xff08;此处是想表达先遍历其右子树再遍历其左子树这样遍历的过程中每个节点值得大小排序是降序得&#xff09;**其节点&…

宝塔PHP环境安装配置Xdebug

宝塔PHP环境安装配置Xdebug 安装XdebugVSCode安装插件编辑配置文件编辑配置运行调试断点快捷键其他 安装Xdebug 在宝塔中&#xff0c;找到PHP&#xff0c;打开管理页面&#xff0c;选择xdebug扩展&#xff0c;点击操作栏中的安装按钮&#xff08;这里已经安装过了&#xff0c;…

砍死怪兽的概率

题目描述&#xff1a;给定3个参数&#xff0c;N&#xff0c;M&#xff0c;K&#xff0c;怪兽有N滴血&#xff0c;等着英雄来砍自己&#xff0c;英雄每一次打击&#xff0c;都会让怪兽流失[0,M]的血量&#xff0c;流失的值每次在[0,M]上等概率的获得一个值&#xff0c;求K次打击…

kafka单机安装及性能测试

kafka单机安装及性能测试 Apache Kafka是一个分布式流处理平台&#xff0c;最初由LinkedIn开发&#xff0c;并于2011年开源&#xff0c;随后成为Apache项目。Kafka的核心概念包括发布-订阅消息系统、持久化日志和流处理平台。它主要用于构建实时数据管道和流处理应用&#xff0…

电商项目之有趣的支付签名算法

文章目录 1 问题背景2 思路3 代码实现 1 问题背景 在发起支付的时候&#xff0c;一般都需要对发送的请求参数进行加密或者签名&#xff0c;下文简称这个过程为“签名”。行业内比较普遍的签发算法有&#xff1a; &#xff08;1&#xff09;按支付渠道给定的字段排序进行拼接&am…

C++|设计模式(〇)|设计模式的六大原则

这里文章只做简要描述&#xff0c;作为扫盲 在软件开发过程中&#xff0c;遵循一定的设计原则可以帮助开发者创建更加灵活、可维护和可扩展的系统。设计模式的六大原则是面向对象设计的核心理念&#xff0c;本文将详细介绍这些原则&#xff0c;并结合实例说明它们的重要性和应用…

Android Studio添加依赖 新版 和 旧版 的添加方式(Gradle添加依赖)(Java)

旧版的&#xff08;在线添加&#xff09; 1找 文件 在项目的build.gradle文件中添加依赖(在下面的节点中添加库 格式 ’ 组 &#xff1a;名字 &#xff1a; 版本号 ‘ ) dependencies {implementation com.example:library:1.0.0 }implementation 组:名字:版本…

【lambdastreammaven】

lambda 匿名函数 为了简化java中的匿名内部类 事件监听 写一个类 实现 ActionListener 接口 (外部类) | | 内部类 类在其他地方用不到, 索性就把这个类定义在类的内部使用 好处: 1.内部可以使用外部类的成员 …

互联网十万个为什么之什么是分布式计算?

分布式计算是一种计算方法&#xff0c;它将计算任务分散到多个物理或逻辑上分开的计算机&#xff08;称为节点&#xff09;上执行&#xff0c;这些节点通过网络互连并协作完成共同的目标。每个节点具备独立的处理能力和存储资源&#xff0c;在分布式系统中&#xff0c;它们共享…

论文阅读--CLIPasso

让计算机把真实图片抽象成简笔画&#xff0c;这个任务很有挑战性&#xff0c;需要模型捕获最本质的特征 以往的工作是找了素描的数据集&#xff0c;而且抽象程度不够高&#xff0c;笔画是固定好的&#xff0c;素描对象的种类不多&#xff0c;使得最后模型的效果十分受限 之所以…

小米财报:业绩远超预期,汽车推着手机跑!

随着一季度财报陆续出炉&#xff0c;企业间的分化越来越明显。 新环境下&#xff0c;很多公司都陷入停滞时&#xff0c;去讨论“掉队”已经没有多少意义&#xff0c;现在真正值得我们关注的&#xff0c;是那些在逆风情况下&#xff0c;还能“领先”的企业。毫无疑问&#xff0…