echarts业务中常用属性设置记录

1.legend计算占比(解决占比总和不等于100%的问题)


//在data中定义两个字段
total:0,
znum:0
//计算上面两个值
this.data.forEach(val => this.total += parseInt(val.value));
for (let i = 0; i < nv.length; i++) {if (i != nv.length - 1) {this.znum = this.znum + Number(parseFloat((nv[i].value / this.total) * 100).toFixed(2));}}
//在legend中使用
formatter: function (name) {if (show == false) {return name + '  ' + '****';} else {for (let i = 0; i < that.data.length; i++) {if (that.data[i].name == name) {if (that.data[i].value != 0) {if (i == that.data.length - 1) {return name + '  ' + parseFloat(100 - that.znum).toFixed(2) + '%';} else {return (name +'  ' +parseFloat((that.data[i].value / that.total) * 100).toFixed(2) +'%');}} else {return name + '  ' + '0%';}}}}}

2.设置圆环中间文字的位置

title: {//圆环中间内容show: true,text: '第一行文字',left: '23.5%',top: '38%',subtext:'第二行文字',textAlign:'center',textStyle: {color: '#fff',fontSize: 16,align: 'center'},subtextStyle: {fontSize: 12,fontWeight:'bold',align: 'center',color: '#fff',align: 'center'}},

3.饼图设置动态切换

//1.定义两个字段
selectValue:"",
selectTitle:""
//主要属性dispatchAction 
//设置选中
this.echarts.dispatchAction({type: "highlight",//seriesIndex:number | array系列 index,可以是一个数组指定多个系列seriesIndex: [0,1,2],  //选中的维度//dataIndex:number 数据的 indexdataIndex: i
})//设置取消选中
this.echarts.dispatchAction({type: "downplay",//seriesIndex:number | array系列 index,可以是一个数组指定多个系列seriesIndex: [0,1,2],//dataIndex:number 数据的 indexdataIndex: i-2
})//整个逻辑this.$nextTick(() => {this.echarts = this.$echarts.init(this.$refs.echarts);this.setOption(this.show);let i=0;let j=0;this.timer=setInterval(()=>{if(i<this.pieData.length){this.echarts.dispatchAction({type: "highlight",//seriesIndex:number | array系列 index,可以是一个数组指定多个系列seriesIndex: [0,1,2],//dataIndex:number 数据的 indexdataIndex: i})i+=2;}else{i=0;this.echarts.dispatchAction({type: "highlight",//seriesIndex:number | array系列 index,可以是一个数组指定多个系列seriesIndex: [0,1,2],//dataIndex:number 数据的 indexdataIndex: i})i+=2;}if (j == this.data.length - 1) {this.selectValue=parseFloat(100 - this.znum).toFixed(2) + '%';this.selectTitle=this.data[j].typeName;j=-1;} else {this.selectValue=parseFloat((this.data[j].average / this.total) * 100).toFixed(2) +'%'this.selectTitle=this.data[j].typeName;}this.setOption(this.show);j+=1;setTimeout(()=>{this.echarts.dispatchAction({type: "downplay",//seriesIndex:number | array系列 index,可以是一个数组指定多个系列seriesIndex: [0,1,2],//dataIndex:number 数据的 indexdataIndex: i-2})},1200)},3000)});

4.设置数据修改后触发重新渲染动画


this.echarts.dispose(); //销毁实例
this.echarts = this.$echarts.init(this.$refs.echarts); //重新创建实例

5.设置颜色渐变

//bgColor为自定义的颜色数组color:new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1,color: _this.bgColor.color1},{offset: 0,color: _this.bgColor.color2}
])

6.设置坐标轴的样式

//1.设置tooltip背景样式tooltip: {backgroundColor: 'rgba(30, 30, 30, 0.55)',borderColor: 'rgba(30, 30, 30, 0.55)',textStyle: {color: '#fff'}
},//2.设置坐标轴样式
xAxis: {// X轴-相关设置axisLabel: {// X轴-坐标轴刻度标签的相关设置。// show: true, // 是否显示刻度标签。默认为truecolor: '#1492C9',rotate: 0, // 刻度标签旋转的角度。默认为0margin: 5, // 刻度标签与轴线之间的距离。 默认8pxfontSize: 15,// 坐标轴刻度标签的显示间隔。// 0表示显示所有标签,1表示间隔一个显示标签interval: 0},axisTick: {// X轴-坐标轴刻度相关设置show: false},splitLine: {// X轴-分隔线show: false},axisLine: {// X轴-坐标轴轴线相关设置show: true,lineStyle: {color: '#384267'// type: 'solid' // 线的类型。可选'solid'等}},data: this.xAxis
},
yAxis: {// Y轴-相关设置nameTextStyle: {// Y轴-坐标轴名称的文字样式color: '#1492C9',padding: [0, 0, 10, 0],fontSize: 14},axisLabel: {// Y轴-坐标轴刻度标签的相关设置color: '#1492C9',fontSize: 15},axisTick: {// Y轴-坐标轴刻度相关设置。show: false,lineStyle: {color: '#384267'}},splitLine: {// Y轴-分隔线show: true,lineStyle: {color: 'rgba(56,66,103,0.5)'}},axisLine: {// Y轴-坐标轴轴线相关设置。// show: true// lineStyle: {//     color: '#384267',//     type: 'solid'// }}
},//3.设置小圆点发光
series: {large: true,type: 'line',smooth: false,itemStyle: option.seriesLineStyle || {width: 2.5,color: '#F2597F', //小圆点和线的颜色shadowColor: '#fff',shadowBlur: 15},showSymbol: true,symbolSize: 6,//设置折线下方阴影部分的样式areaStyle: option.areaStyle && {  opacity: 0.58,color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 0.6, [{offset: 0,color: option.areaStyle.color1},{offset: 1,color: option.areaStyle.color2}])},emphasis: {focus: 'series'},data: option.series || []
}

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

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

相关文章

Qt/QML编程之路:使用camera摄像头(35)

汽车应用中,camera起到了越来越多的作用,数字化的作用,这点无可争议,而作为GUI设计工具,如何让Camera类的应用能更好的发挥作用呢? You can use Camera to capture images and movies from a camera, and manipulate the capture and processing settings that get appl…

网站防御爬虫攻击有哪些方式

很多网站都深受爬虫困扰&#xff0c;网站在被爬虫大量抓取的的时候经常容易被爬虫把服务器资源抓崩了&#xff0c;有的时候&#xff0c;同行也会来爬取我们网站进行数据采集&#xff0c;影响我们站点的原创性&#xff0c;那么如何进行相对应的防护还是非常重要的&#xff01; …

mysql新增用户密码控制局域网访问权限

方法一、通过navicat中sql语句新增 CREATE USER usernamelocalhost IDENTIFIED BY password; GRANT ALL PRIVILEGES ON *.* TO usernamelocalhost WITH GRANT OPTION; FLUSH PRIVILEGES;把其中的username和password改成自己的即可 如果将上面的localhost改成%&#xff0c;则这…

从CISC到RISC-V:揭开指令集的面纱

对于大多数同学来说&#xff0c;计算机或智能手机的运行似乎就像魔法一样神奇。你可能知道它们内部都是一些复杂的电子组件&#xff0c;比如CPU、内存等等&#xff0c;但这些组件是如何协同工作&#xff0c;让我们可以在电脑上打字&#xff0c;或者在手机上看视频呢&#xff1f…

1.环境部署

1.虚拟机安装redhat8系统 这个其实很简单&#xff0c;但是有一点小细节需要注意。 因为我的电脑是 16核心的&#xff0c;所以选择内核16&#xff0c;可以最大发挥虚拟机的性能 磁盘选择SATA&#xff0c;便于后期学习 将一些没用的设备移除 选择安装redhat 8 时间选择上海 选择…

Python 语法糖

一、基本概念 语法糖&#xff0c;可以理解为&#xff1a;“甜蜜” 的便捷语法。 它是编程语言为程序提供的更简洁、更易读的语法实现的语法结构&#xff0c;它并不影响语言的功能&#xff0c;仅仅是一种更便捷的书写方式。 这就像你制作蛋糕时&#xff0c;使用现代烤箱而不是…

无法解析的外部符号ShellExecuteExW

问题情况 在QT使用&#xff1a;ShellExecuteEx时遇上这么一个错误&#xff1a;遇上这么一个错误&#xff1a; error: LNK2019: 无法解析的外部符号 __imp_ShellExecuteExW *ReportService.obj&#x1f44e; error: LNK2019: 无法解析的外部符号 __imp_ShellExecuteExW&#x…

源码部署Milvus(三)成功解决vscode调试milvus源码时间超时问题!

作者有话说 继上周成功调试后出现时间超时问题&#xff0c;且想定位create_index等如何触发milvus底层实现文件&#xff0c;总是报错Timeout&#xff0c;这周碎片化抽空解决此问题&#xff0c;猜测可能是vscode配置的调试环境有问题&#xff0c;果不其然&#xff01; 报错 g…

React16源码: React中调度之scheduleWork的源码实现

scheduleWork 1 &#xff09; 概述 在 ReactDOM.render, setState, forceUpdate 这几个方法最终都调用了 scheduleWork 这个方法 在 scheduleWork 当中&#xff0c;它需要去找到更新对应的 FiberRoot 节点 在使用 ReactDOM.render 的时候&#xff0c;传给 scheduleWork 的就是…

RocketMQ源码阅读-Producer消息发送

RocketMQ源码阅读-Producer消息发送 1. 从单元测试入手2. 启动过程3. 同步消息发送过程4. 异步消息发送过程5. 小结 Producer是消息的生产者。 Producer和Consummer对Rocket来说都是Client&#xff0c;Server是Broker。 客户端在源码中是一个单独的Model&#xff0c;目录为rock…

ASP.NET Core 的 Web Api 实现限流 中间件

Microsoft.AspNetCore.RateLimiting 中间件提供速率限制&#xff08;限流&#xff09;中间件。 它是.NET 7 以上版本才支持的中间件&#xff0c;刚看了一下&#xff0c;确实挺好用&#xff0c;下面给大家简单介绍一下&#xff1a; RateLimiterOptionsExtensions 类提供下列用…

本地浏览器查看--服务器上运行的可视化,如tensorboard

特别提醒&#xff1a;注意看本地端和服务器端 一、服务器终端运行 tensorboard --logdirlogs --port6008二、本地终端运行--以建立端口映射 ssh -L 6008:localhost:6008 -p 443 root服务器IP解释&#xff1a;将服务器的6008端口映射到本地的6008端口&#xff0c;-p 443 …

收支明细曲线图:一图掌握你的财务变化趋势!

想要快速了解你的收支明细和变化趋势吗&#xff1f;不需要复杂的财务表格&#xff0c;一个曲线图就能让你一目了然&#xff01;现在&#xff0c;就让我们带你走进「图形化分析收支变化趋势」的世界&#xff0c;让你轻松掌握自己的财务状况。 首先&#xff0c;第一步&#xff0…

超结MOS在舞台灯电源上的应用-REASUNOS瑞森半导体

一、前言 舞台灯电源是一种为舞台灯具提供电力转换和控制的设备&#xff0c;它可以根据不同的灯具类型和需求&#xff0c;提供恒流或恒压、可调光或不可调光、模拟或数字或网络等输出模式。 舞台灯电源的主要特点是具有高效、稳定、安全、智能等功能&#xff0c;它可以适应不…

MySQL表状态参数解读

查看表状态 SHOW TABLE STATUS where name ***; 返回结果示例 *************************** 1. row ***************************Name: ***Engine: InnoDBVersion: 10Row_format: CompactRows: 2036375Avg_row_length: 139Data_length: 284164096 Max_data_length: 0Index_…

ARCH使用率100% ,asmcmd显示无文件

oracle rac 11.2.0.3 归档满了之后,无法连接数据库,通过ASMCMD删除文件之后,还是无法连接 原归档ARCH盘已没有使用,但是空间还是持续增长到100%,手动切换归档正常,但是日志偶尔会出现无法归档的报错 ARCH使用率100% ,asmcmd连接显示里面没有文件 ,无法清理 ,应用偶尔出现连接超…

一台电脑如何通过另一台联网电脑访问网络

电脑A没有连接网络&#xff0c;电脑B已经连接wifi。 电脑A如何通过访问电脑B从而连接网络&#xff1f; 1. 将这2台电脑用网线直连 2. 电脑B打开【网络和Internet设置】 3. 右键点击WLAN&#xff0c;选择属性&#xff0c;进入共享tab页面&#xff0c;勾选【允许其他网络用户通过…

Kafka集群与可靠性

Kafka集群与可靠性 1.Kafka集群搭建实战 使用两台Linux服务器&#xff1a;一台192.168.182.137 一台192.168.182.138 安装kafka首先&#xff0c;我们需要配置java环境变量&#xff08;这里就略过了&#xff09; mkdir /opt/kafka #上传压缩包kafka_2.13-3.3.1.tgz并解压 ta…

Rust-Panic

什么是panic 在Rust中&#xff0c;有一类错误叫作panic。示例如下&#xff1a; 编译&#xff0c;没有错误&#xff0c;执行这段程序&#xff0c;输出为&#xff1a; 这种情况就引发了一个panic。在这段代码中&#xff0c;我们调用了Option::unwrap()方法&#xff0c;正是这个方…

SparkSQL初体验

SparkSQL初体验 命令式的 API RDD 版本的 WordCount val conf new SparkConf().setAppName("ip_ana").setMaster("local[6]") val sc new SparkContext(conf)sc.textFile("hdfs://master:9000/dataset/wordcount.txt").flatMap(_.split("…