echarts开发技巧

tooltip

提示框组件相关的行为,必须引入提示框组件后才能使用。

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'cross',
    label: {
      backgroundColor: '#6a7985',
    },
  },

  //为弹出层的value值增加百分号
  valueFormatter: function (value) {
    return value + '%'
  },
},

tooltip.axisPointer.type = 'cross' 时,指示线显示为

tooltip.axisPointer.type = 'shadow' 时,指示线显示为 

 tooltip.axisPointer.type = 'none' 时,无指示。

legend

legend就是Echarts图表中对图形的解释部分

legend: {
  //data: ['王菲', '张婧怡', '王芳', '李利森', '李四', '毛利兰', '江户川柯南']
  data: legendData,
},

legend: {
  data: legendData,
  //溢出滚动
  type: 'scroll',
  pageIconColor: '#555555',
  pageIconSize: 12,
  pageTextStyle: {
    color: "#555555"
  },
  textStyle: {
    color: '#555555'
  },
},

 溢出出现分页图标

yAxis

设置y轴

yAxis: [
  {
    type: 'value',
    position: 'left',
    axisLabel: {
      //y轴指标加百分号
      formatter: '{value}%',
    },
  },
],
dataZoom

dataZoom是ECharts中的一个组件,用于实现数据区域缩放功能

dataZoom: {
  type: 'slider',
  //图表最多显示5条数据
  start: 100 - (5 / xAxisData.length) * 100,
  end: 100,
  left: 'center',
  width: '80%',
},

series

一组数值以及他们映射成的图

series[0].label.show = 'true':是否显示图上面的值

series: [
  {
    name: this.dataTypeName,
    type: 'bar',
    data: valueList,
    label: {
      //柱状图末尾显示的值
      show: true,
      position: 'right',
      valueAnimation: true,

      //柱状图末尾显示的值新增百分号
      formatter: (params) => params.value + '%',
    },
  },
],

echarts重新加载
myChart.clear()
option && myChart.setOption(option)
路由跳转后,echarts显示空白问题

在生命周期函数中释放图表,使得路由跳转后echart重新加载

beforeUnmount() {
  let chartDom = document.getElementById('echartsDiv')
  let myChart = echarts.init(chartDom)
  if (myChart) {
    myChart.clear() //清空图表
    myChart.dispose() //释放图表组件
    myChart = null
  }
},

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

碳课堂|快速了解标准要点:ISO 14064-1

为了提高企业组织碳排放报告信誉度,国际标准化组织(ISO)发布了ISO14064 标准(全称:《ISO 14064-1组织层次上对温室气体排放和清除的量化和报告的规范及指南》),报告中详细规定了公司温室气体清单…

确定性最大似然(DML)估计测角

1. 最大似然函数 贝叶斯方法是基于统计理论的一种经典方法,适合于有关参数估计问题。最大似然 (Maximum Likelihood,ML) 估计方法就是贝叶斯估计方法的一种特例,是在已知高斯噪声情况下的贝叶斯最优估计。在ML算法中,观测所得信号…

品牌出海新篇章:独立站构建与流量转化策略

在当今数字化时代,品牌出海已成为许多企业拓展国际市场的重要途径之一。在这个过程中,构建一个高效、专业的独立站,成为了品牌出海的重要一环。独立站不仅有助于企业塑造独特的品牌形象,更能通过精准的营销策略提高流量和转化率&a…

乘用车整车太阳光模拟加速老化试验太阳光模拟器

1.阳光模拟试验介绍 太阳辐射会对室外停放的汽车内外饰件产生热效应和光化学效应,影响汽车内外饰件的外观、性能,对汽车质产生不利影响。按照汽车产环境试验标准的要求,汽车在研制定型之前应进行太阳辐射试验,以考虑其对太阳辐射环…

微服务之分布式理论zookeeper概述

一、分布式技术相关的理论 CAP理论 CAP定理(CAP theorem),⼜被称作布鲁尔定理(Eric Brewer),1998年第⼀次提出. 最初提出是指分布式数据存储不可能同时提供以下三种保证中的两种以上: (1) ⼀致性(Consistency): 每次读取收到的信息都是最新的; (2) …

探索主播美颜工具与直播美颜SDK的技术奥秘

主播的形象美化是至关重要的一环,而实现这一目标的关键在于美颜工具和直播美颜SDK。接下来,我们将一同深入探索这些技术的奥秘,揭示它们背后的原理和工作方式。 一、美颜工具的背后 美颜工具是一类应用软件,旨在通过图像处理技术…

树莓派点亮LED灯

简介 使用GPIO Zero library 的 Python库实现点亮LED灯。接线 树莓派引脚参考图如下: LED正极 接GPIO17 LED负极 接GND 权限 将你的用户加到gpio组中, 否则无法控制GPIO sudo usermod -a -G gpio 代码 from gpiozero import LED from time impor…

基于H.264的RTP打包中的组合封包以及分片封包结构图简介及抓包分析;FU-A FU-B STAP-A STAP-B简介;

H.264视频流的RTP封装类型分析: 前言: 1.RTP打包原则: RTP的包长度必须要小于MTU(最大传输单元),IP协议中MTU的最大长度为1500字节。除去IP报头(20字节)、UDP报头(8字节)、RTP头&a…

【Axure高保真原型】拖动穿梭选择器

今天和大家分享拖动穿梭选择器的原型模板,我们可以拖动两个选择器里的选项标签,移动到另外一个选择器里。那这个原型模板是用中继器制作的,所以使用也很方便,只需要在中继器表格里填写选项信息,即可自动生成交互效果&a…

传神社区本月亮点:4月功能更新全览

传神社区始终保持着对技术进步与用户体验的执着追求,持续升级更新,力求完善各项功能,以满足用户多样化的需求。本月,传神社区升级了4个方面的功能,让我们一同揭开这些功能的神秘面纱吧! 1 资产管理功能增强…

stm32cubeMX智能小车蓝牙模块

本文使用的代码是 HAL 库。 文章目录 前言一、蓝牙模块介绍二,AT指令测试蓝牙模块三,原理图分析四,cubeMX 配置五,编写代码总结 前言 实验小车:STM32F103C8T6。 蓝牙模块:HC-05。 所需软件:kei…

Jdk 内存伪共享

一、什么是伪共享 数据X、Y、Z被加载到同一Cache Line中,线程A在Core1上修改X,而修改X会导致其所在的所有核上的缓存行均失效;假设此时线程B在Core2上读取Y,由于X所在的缓存行已经失效,所有Core2必须从内存中重新读取。…

碳排放预测(粉丝免费) | 基于深度学习的碳排放预测模型

效果分析 基本介绍 基于深度学习的碳排放预测模型 碳排放量预测是碳中和目标达成工作中的重要组成部分。为了实时预测碳排放量,本文深度学习在数据特征提取方面的优势和长短期记忆人工神经网络解决时间序列各个观测值依赖性问题的特点,提出了一种基于深度学习的碳排放量预测模…

springboot图书个性化推荐系统的设计与实现+1w字文档

项目演示视频: 【源码免费送】基于springboot图书个性化推荐系统的设计与实现录像 摘 要 本论文主要论述了如何使用JAVA语言开发一个图书个性化推荐系统,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项…

Linux基础-socket详解、TCP/UDP

文章目录 一、Socket 介绍二、Socket 通信模型三、Socket 常用函数1 创建套接字2 绑定套接字3、监听连接4、接受连接5、接收和发送数据接收数据发送数据 6、关闭套接字 四、Socket编程试验1、源码server.cclient.c 2、编译:3、执行结果 五、补充TCP和UDP协议的Socke…

Agisoft Metashape 自定义底图

Agisoft Metashape 自定义底图 前言 Agisoft Metashape 从2.0.2 版本开始,Agisoft Metashape Professional 和 Agisoft Viewer 支持自定义底图,可用于模型和正射视图模式。本文以添加Esri World Image卫星底图图源为例,介绍Agisoft Metashape 自定义底图的方法。 添加自定…

YOLOV8 pycharm

1 下载pycharm 社区版 https://www.jetbrains.com/zh-cn/pycharm/download/?sectionwindows 2 安装 3 新建 4 选择 文件-> setting 配置环境变量 5 添加conda 环境

vite打包配置

目录 minify默认是esbuild,不能启动下面配置 使用: plugins: [viteMockServe({mockPath: mock})]根目录新建mock/index.ts. 有例子Mock file examples:https://www.npmjs.com/package/vite-plugin-mock-server 开发环境生产环境地址替换。根…

php7.4在foreach中对使用数据使用无法??[]判读,无法使用引用传递

代码如下图:这样子在foreach中是无法修改class_history的。正确的应该是去掉??[]判断。 public function actionY(){$array [name>aaa,class_history>[[class_name>一班,class_num>1],[class_name>二班,class_num>2]]];foreach ($array[class_…

营收不过万,世道艰难,月末总结复盘ing

2024已经走过了1/3,从事实上看确实如大佬们所说世道越来越难,过往的几个月份营收只有区区10000。向下兼容的话从绝对值上看收入确实不少了,从相对值上看又少的可怜,只能满足温饱而已。 这个月上半场成绩非常喜人,半个月…