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。

相关文章

Golang的CSP模型简介(最新推荐)

Golang的CSP模型简介(最新推荐)

《Golang的CSP模型简介(最新推荐)》Golang采用了CSP（CommunicatingSequentialProcesses,通信顺序进程）并发模型,通过goroutine和channe... 目录前言一、介绍1. 什么是 CSP 模型2. Goroutine3. Channel4. Channe
阅读更多...
Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

《Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)》：本文主要介绍Python基于火山引擎豆包大模型搭建QQ机器人详细的相关资料,包括开通模型、配置APIKEY鉴权和SD... 目录豆包大模型概述开通模型付费安装 SDK 环境配置 API KEY 鉴权Ark 模型接口Prompt
阅读更多...
Spring Boot 中整合 MyBatis-Plus详细步骤(最新推荐)

Spring Boot 中整合 MyBatis-Plus详细步骤(最新推荐)

《SpringBoot中整合MyBatis-Plus详细步骤(最新推荐)》本文详细介绍了如何在SpringBoot项目中整合MyBatis-Plus,包括整合步骤、基本CRUD操作、分页查询、批... 目录一、整合步骤1. 创建 Spring Boot 项目2. 配置项目依赖3. 配置数据源4. 创建实体类
阅读更多...
Java子线程无法获取Attributes的解决方法(最新推荐)

Java子线程无法获取Attributes的解决方法(最新推荐)

《Java子线程无法获取Attributes的解决方法(最新推荐)》在Java多线程编程中,子线程无法直接获取主线程设置的Attributes是一个常见问题,本文探讨了这一问题的原因,并提供了两种解决... 目录一、问题原因二、解决方案1. 直接传递数据2. 使用ThreadLocal（适用于线程独立数据）
阅读更多...
Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人，AI大神Andrej Karpathy，曾是OpenAI联合创始人之一，特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ，宣布将长期致力于AI原生教育。 近日，Andrej Karpathy接受了No Priors（投资博客）的采访，与硅谷知名投资人 Sara Guo 和 Elad G
阅读更多...
秋招最新大模型算法面试，熬夜都要肝完它

秋招最新大模型算法面试，熬夜都要肝完它

💥大家在面试大模型LLM这个板块的时候，不知道面试完会不会复盘、总结，做笔记的习惯，这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助，都附有完整答案，熬夜也要看完，祝大家一臂之力 这份《大模型算法工程师面试题》已经上传CSDN，还有完整版的大模型 AI 学习资料，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费
阅读更多...
AI Toolkit + H100 GPU，一小时内微调最新热门文生图模型 FLUX

AI Toolkit + H100 GPU，一小时内微调最新热门文生图模型 FLUX

上个月，FLUX 席卷了互联网，这并非没有原因。他们声称优于 DALLE 3、Ideogram 和 Stable Diffusion 3 等模型，而这一点已被证明是有依据的。随着越来越多的流行图像生成工具（如 Stable Diffusion Web UI Forge 和 ComyUI）开始支持这些模型，FLUX 在 Stable Diffusion 领域的扩展将会持续下去。 自 FLU
阅读更多...
JavaSE——封装、继承和多态

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性：封装、继承、多态 。而类和对象阶段，主要研究的就是封装特性。何为封装呢？简单来说就是套壳屏蔽细节 。     比如：对于电脑这样一个复杂的设备，提供给用户的就只是：开关机、通过键盘输入，显示器， USB 插孔等，让用户来和计算机进行交互，完成日常事务。但实际上：电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。
阅读更多...
利用matlab bar函数绘制较为复杂的柱状图，并在图中进行适当标注

利用matlab bar函数绘制较为复杂的柱状图，并在图中进行适当标注

示例代码和结果如下：小疑问：如何自动选择合适的坐标位置对柱状图的数值大小进行标注？😂 clear; close all;x = 1:3;aa=[28.6321521955954 26.2453660695847 21.69102348512086.93747104431360 6.25442246899816 3.342835958564245.51365061796319 4.87
阅读更多...
哈希表的封装和位图

哈希表的封装和位图

文章目录 2 封装2.1 基础框架2.2 迭代器(1)2.3 迭代器(2) 3. 位图3.1 问题引入3.2 左移和右移？3.3 位图的实现3.4 位图的题目3.5 位图的应用 2 封装 2.1 基础框架 文章 有了前面map和set封装的经验，容易写出下面的代码 // UnorderedSet.h#pragma once#include "HashTable.h"
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2