echarts最新封装柱状图

2024-08-27 18:52
文章标签 封装 最新 echarts 柱状图

本文主要是介绍echarts最新封装柱状图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述

  • 父元素传入一次最多显示几个以及每次切换几个
  • 超出没两秒向右切换一个
  • 图表加载有动画效果
  • 动态更新数据实时显示
  • 屏幕尺寸改变自动适应
  • 字体大小自适应

组件 BarChart.vue

<template><div class="w100 h100"><divref="chart"class="w100 h100"@mouseenter="stopTimer"@mouseleave="startTimer"></div></div>
</template><script>
import resize from "./mixins/resize";
let color = ["#FFF200", "#ff6200"];
let color1 = ["rgba(255, 225, 128,.6)", "rgba(245, 116, 116,.6)"];
export default {name: "BarChart",mixins: [resize],props: {/*** chartData 属性定义* 类型：Array* 是否必填：是* 描述：用于接收图表数据，是渲染图表的基础*/chartData: {type: Array,required: true,},/*** maxVisibleBars 属性定义* 类型：Number* 默认值：6* 描述：定义图表中最大可见的条形数量，用于限制图表的显示范围，以避免过多数据导致的视觉混乱*/maxVisibleBars: {type: Number,default: 6,},/*** barsPerStep 属性定义* 类型：Number* 默认值：1* 描述：定义每次滚动或更新时，图表显示的条形数量变化，用于控制图表更新的平滑度*/barsPerStep: {type: Number,default: 1,},},data() {return {chart: null,currentIndex: 0,timer: null,};},mounted() {this.initChart();this.startTimer();},beforeDestroy() {if (this.timer) {clearInterval(this.timer);}if (this.chart) {this.chart.dispose();}},watch: {chartData: {handler: "updateChart",deep: true,},},methods: {initChart() {this.chart = this.$echarts.init(this.$refs.chart);this.updateChart();},updateChart() {const visibleData = this.chartData.slice(this.currentIndex,this.currentIndex + this.maxVisibleBars);const option = {color: ["#FFF200", "#ff6200"], //柱状图颜色// backgroundColor: "#000", //背景色animation: true, //开启动画（页面一进来柱状图升起动画）animationDuration: 1000, //动画时长animationEasing: "cubicInOut", //动画缓动效果animationDurationUpdate: 500, //更新数据动画时长animationEasingUpdate: "cubicInOut", //更新动画缓动效果title: {//标题text: "动态柱图",textStyle: {color: "#fff",fontSize: this.fontSize(0.2),},left: "center",top: "2%",},tooltip: {//提示框组件show: true,trigger: "item", //提示框触发的条件，默认为鼠标悬浮formatter: "{b}{a}: {c}", //提示框内容格式 a 为系列名称，b 为数据项名称，c 为数据项值，d 为百分比，e 为数据项所在系列索引值backgroundColor: "#f9f9f9",borderColor: "#ccc",borderWidth: 1,padding: [5, 10],textStyle: {color: "#333",fontSize: 14,},},grid: {top: "20%",left: "6%",right: "1%",bottom: "4%",containLabel: true,},legend: {itemHeight: this.fontSize(0.12), //图例图标的高度itemWidth: this.fontSize(0.2), //图例图标的宽度itemGap: this.fontSize(0.23), //图例图标与文字间的间距textStyle: {color: "#fff",borderColor: "#fff",fontSize: this.fontSize(0.14),},top: 7,right: 20,},xAxis: {type: "category",data: visibleData.map((item) => item.name),boundaryGap: true,//坐标轴axisLine: {lineStyle: {color: "#2384B1", //横轴颜色width: this.fontSize(0.01), //横轴粗细},},axisLabel: {interval: 0, // 显示所有标签rotate: 30, // 倾斜标签以节省空间textStyle: {color: "#fff", // 横坐标颜色fontSize: this.fontSize(0.13),},},axisTick: {show: false, //不显示坐标轴刻度},},yAxis: {type: "value",min: 0,minInterval: 1,// 网格线splitLine: {show: true,lineStyle: {color: "#023052",type: "dotted",},},axisLine: {lineStyle: {color: "#2384B1", //横轴颜色width: this.fontSize(0.01), //横轴粗细},},//坐标值标注axisLabel: {textStyle: {color: "#fff",fontSize: this.fontSize(0.13),},},},series: [{name: "数量", // 图例名称data: visibleData.map((item) => item.value),type: "bar",barWidth: this.fontSize(0.2), // 柱状图宽度barMinHeight: 2, // 设置柱状图的最小高度(默认为0时显示一点)// 柱状图颜色渐变itemStyle: {normal: {show: true,color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: color[0],},{offset: 1,color: color1[0],},]),barBorderRadius: [4, 4, 0, 0], // 设置柱形四个角的圆角半径，顺序为左上、右上、右下、左下shadowColor: color1[0],shadowBlur: 24,},},// 柱上面的数值label: {normal: {show: true,position: "top", //在上方显示textStyle: {color: "#fff",fontSize: this.fontSize(0.13),},},},},],};this.chart.setOption(option);},startTimer() {this.timer = setInterval(() => {this.currentIndex += this.barsPerStep;if (this.currentIndex + this.maxVisibleBars > this.chartData.length) {this.currentIndex = 0;}this.updateChart();}, 2000);},stopTimer() {clearInterval(this.timer);},},
};
</script><style scoped>
</style>

父组件

<template><div id="app" style="background: #000"><BarChart style="width: 500px; height: 400px" :chartData="data" /><button @click="updateData">更新数据</button></div>
</template><script>
import BarChart from "./components/BarChart.vue";
export default {components: {BarChart,},data() {return {data: [{ name: "项目1", value: 20 },{ name: "项目2", value: 30 },{ name: "项目3", value: 10 },{ name: "项目4", value: 40 },{ name: "项目5", value: 0 },{ name: "项目6", value: 0.5 },{ name: "项目7", value: 1 },{ name: "项目8", value: 45 },{ name: "项目9", value: 30 },{ name: "项目10", value: 20 },],};},methods: {updateData() {this.$set(this.data, 4, {name: "更新后的项目",value: Math.random() * 100,});},},
};
</script>

/mixins/resize.js

import { debounce } from "@/utils";export default {data() {return {$_sidebarElm: null,$_resizeHandler: null,};},mounted() {this.initListener();// console.log(888, this.fontSize(1));},activated() {if (!this.$_resizeHandler) {// avoid duplication initthis.initListener();}// when keep-alive chart activated, auto resizethis.resize();},beforeDestroy() {this.destroyListener();},deactivated() {this.destroyListener();},methods: {// 字体大小自适应fontSize(res) {let docEl = document.documentElement,clientWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (!clientWidth) return;let fontSize = 100 * (clientWidth / 1920);return res * fontSize;},// use $_ for mixins properties// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential$_sidebarResizeHandler(e) {if (e.propertyName === "width") {this.$_resizeHandler();}},initListener() {this.$_resizeHandler = debounce(() => {this.resize();}, 100);window.addEventListener("resize", this.$_resizeHandler);this.$_sidebarElm =document.getElementsByClassName("sidebar-container")[0];this.$_sidebarElm &&this.$_sidebarElm.addEventListener("transitionend",this.$_sidebarResizeHandler);},destroyListener() {window.removeEventListener("resize", this.$_resizeHandler);this.$_resizeHandler = null;this.$_sidebarElm &&this.$_sidebarElm.removeEventListener("transitionend",this.$_sidebarResizeHandler);},resize() {const { chart } = this;chart && chart.resize();},},
};

对比原来柱状图

<template><div class="w100 h100"><div class="flex-3 h100" ref="chart6" /></div>
</template><script>
import resize from "./mixins/resize";
let color = ["#FFF200", "#ff6200"];
let color1 = ["rgba(255, 225, 128,.6)", "rgba(245, 116, 116,.6)"];
export default {mixins: [resize],props: ["list"],watch: {list: {handler(val) {this.initChart();// 深度监听没有旧值let month = val.monthOrDayOrTimeList;let orderNum = val.administrativeDivisionList;// let month = val.map((item) => {//   return item.date;// });// let orderNum = val.map((item) => {//   return item.sugarAfterMeal;// });// let orderNum1 = val.map((item) => {//   return 47 - item.sugarAfterMeal;// });let option = {xAxis: [{data: month,},],series: [{name: "火灾总量",data: orderNum, // 订单量},// {//   name: "非轻微火灾",//   data: orderNum1, // 订单量// },],};this.chart.setOption(option);if (this.timeId) {clearInterval(this.timeId);this.timeId = null;}if (month.length > this.maxNum) {let num = 0;this.timeId = setInterval(() => {if (num + this.maxNum == month.length) {num = 0;} else {num += 1;}let option = {dataZoom: [{startValue: num, // 从头开始。endValue: num + this.maxNum - 1, // 一次性展示几个},],};this.chart.setOption(option);}, 3000);}},// 这里是关键，代表递归监听的变化deep: true,},},data() {return {chart: null,maxNum: 12, // 一次性展示几个。timeId: null,};},mounted() {console.log("tab1Bar来了");this.$nextTick(() => {this.initChart();});},beforeDestroy() {console.log("tab1Bar走了");if (!this.chart) {return;}this.chart = null;clearInterval(this.timeId);this.timeId = null;},methods: {init() {},initChart() {this.chart = this.$echarts.init(this.$refs.chart6);let option = {grid: {top: "20%",left: "6%",right: "1%",bottom: "4%",containLabel: true,},tooltip: {show: true,trigger: "item",formatter: "{b}: {c}",},//滑动条dataZoom: [{xAxisIndex: 0, //这里是从X轴的0刻度开始show: false, //是否显示滑动条，不影响使用type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件startValue: 0, // 从头开始。endValue: this.maxNum - 1, // 一次性展示几个},],// 横坐标设置xAxis: [{type: "category",boundaryGap: true,//坐标轴axisLine: {lineStyle: {color: "#2384B1", //横轴颜色width: this.fontSize(0.01), //横轴粗细},},axisLabel: {interval: 0, // 显示所有标签rotate: 30, // 倾斜标签以节省空间textStyle: {color: "#fff", // 横坐标颜色fontSize: this.fontSize(0.13),},},axisTick: {show: false, //不显示坐标轴刻度},// data: this.month,},],// Y轴设置yAxis: [{type: "value",min: 0,minInterval: 1,// 网格线splitLine: {show: true,lineStyle: {color: "#023052",type: "dotted",},},axisLine: {show: false,},//坐标值标注axisLabel: {textStyle: {color: "#fff",fontSize: this.fontSize(0.13),},},},],legend: {itemHeight: this.fontSize(0.12), //图例图标的高度itemWidth: this.fontSize(0.2), //图例图标的宽度itemGap: this.fontSize(0.23), //图例图标与文字间的间距textStyle: {color: "#fff",borderColor: "#fff",fontSize: this.fontSize(0.14),},top: 7,right: 20,},series: [{name: "",type: "bar",// barWidth: "30%",barWidth: this.fontSize(0.2),itemStyle: {normal: {show: true,color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: color[0],},{offset: 1,color: color1[0],},]),barBorderRadius: [4, 4, 0, 0], // 设置柱形四个角的圆角半径，顺序为左上、右上、右下、左下shadowColor: color1[0],shadowBlur: 24,},},// data: this.orderNum, // 订单量label: {normal: {show: true,position: "top", //在上方显示textStyle: {//数值样式color: "#fff",fontSize: this.fontSize(0.13),// fontWeight: 700,},},},},// {//   name: "",//   type: "bar",//   // barWidth: "30%",//   barWidth: this.fontSize(0.2),//   itemStyle: {//     normal: {//       show: true,//       color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [//         {//           offset: 0,//           color: color[1],//         },//         {//           offset: 1,//           color: color1[1],//         },//       ]),//       barBorderRadius: [4, 4, 0, 0], // 设置柱形四个角的圆角半径，顺序为左上、右上、右下、左下//       shadowColor: color1[1],//       shadowBlur: 24,//     },//   },//   // data: this.orderNum, // 订单量//   label: {//     normal: {//       show: true,//       position: "top", //在上方显示//       textStyle: {//         //数值样式//         color: "#fff",//         fontSize: this.fontSize(0.13),//         // fontWeight: 700,//       },//     },//   },// },],};this.chart.setOption(option);},},
};
</script>
<style lang="sass" scoped>
@import "./css/rem.scss"
</style>

这篇关于echarts最新封装柱状图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1112491。

相关文章

SpringBoot中封装Cors自动配置方式

SpringBoot中封装Cors自动配置方式

《SpringBoot中封装Cors自动配置方式》：本文主要介绍SpringBoot中封装Cors自动配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot封装Cors自动配置背景实现步骤1. 创建 GlobalCorsProperties
阅读更多...
查看Oracle数据库中UNDO表空间的使用情况(最新推荐)

查看Oracle数据库中UNDO表空间的使用情况(最新推荐)

《查看Oracle数据库中UNDO表空间的使用情况(最新推荐)》Oracle数据库中查看UNDO表空间使用情况的4种方法：DBA_TABLESPACES和DBA_DATA_FILES提供基本信息,V$... 目录1. 通过 DBjavascriptA_TABLESPACES 和 DBA_DATA_FILES
阅读更多...
最新Spring Security实战教程之Spring Security安全框架指南

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security？同类框架对比Spring Security典型应用场景传统
阅读更多...
最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

最新Spring Security实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)

《最新SpringSecurity实战教程之表单登录定制到处理逻辑的深度改造(最新推荐)》本章节介绍了如何通过SpringSecurity实现从配置自定义登录页面、表单登录处理逻辑的配置,并简单模拟... 目录前言改造准备开始登录页改造自定义用户名密码登陆成功失败跳转问题自定义登出前后端分离适配方案结语前言
阅读更多...
OpenManus本地部署实战亲测有效完全免费(最新推荐)

OpenManus本地部署实战亲测有效完全免费(最新推荐)

《OpenManus本地部署实战亲测有效完全免费(最新推荐)》文章介绍了如何在本地部署OpenManus大语言模型,包括环境搭建、LLM编程接口配置和测试步骤,本文给大家讲解的非常详细,感兴趣的朋友一... 目录1.概况2.环境搭建2.1安装miniconda或者anaconda2.2 LLM编程接口配置2
阅读更多...
Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)

Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)

《Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)》：本文主要介绍Java导入、导出excel的相关资料,讲解了使用Java和ApachePOI库将数据导出为Excel文件,包括... 目录前言一、引入Apache POI依赖二、用法&步骤2.1 创建Excel的元素2.3 样式和字体2.
阅读更多...
JAVA封装多线程实现的方式及原理

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》：本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中，封装多线程的原理主要围绕着将多线程相关的操
阅读更多...
Mysql中InnoDB与MyISAM索引差异详解(最新整理)

Mysql中InnoDB与MyISAM索引差异详解(最新整理)

《Mysql中InnoDB与MyISAM索引差异详解(最新整理)》InnoDB和MyISAM在索引实现和特性上有差异,包括聚集索引、非聚集索引、事务支持、并发控制、覆盖索引、主键约束、外键支持和物理存... 目录1. 索引类型与数据存储方式InnoDBMyISAM2. 事务与并发控制InnoDBMyISAM
阅读更多...
Redis 内存淘汰策略深度解析(最新推荐)

Redis 内存淘汰策略深度解析(最新推荐)

《Redis内存淘汰策略深度解析(最新推荐)》本文详细探讨了Redis的内存淘汰策略、实现原理、适用场景及最佳实践,介绍了八种内存淘汰策略,包括noeviction、LRU、LFU、TTL、Rand... 目录一、 内存淘汰策略概述二、内存淘汰策略详解2.1 ​noeviction（不淘汰）​2.2 ​LR
阅读更多...
StarRocks索引详解(最新整理)

StarRocks索引详解(最新整理)

《StarRocks索引详解(最新整理)》StarRocks支持多种索引类型,包括主键索引、前缀索引、Bitmap索引和Bloomfilter索引,这些索引类型适用于不同场景,如唯一性约束、减少索引空... 目录1. 主键索引（Primary Key Index）2. 前缀索引（Prefix Index /
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2