【echart】实现echart图的富文本样式

贴源码

  let xData = ['山西','山东','内蒙','甘肃'];let averData = [2, 3,1, 3];var eicon = 'path://M480.55,252.18L318.88,498.04c-15.95,24.25,1.08,56.57,30.11,57.12l147,2.79L448.5,696.92c-14.74,43.15,39.88,75.83,70.93,42.44l216.73-233.04c21.93-23.58,5.21-61.98-27-61.98H560.89l2.11-166.91C563.57,232.54,505.21,214.67,480.55,252.18z'let option = {grid: {left: '6%',right: '2%',bottom: '0%',top: '20%',containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: "shadow",label: {show: true,backgroundColor: itemColor[1],},},backgroundColor: 'rgba(0,0,0,.5)',padding: [5, 10],textStyle: {color: itemColor[1],}},legend: {show: false,},xAxis: {name: '',nameTextStyle: {color: itemColor[0],fontSize: fontSize(12),},splitLine: {show: false,interval: 'auto',lineStyle: {color: ['rgba(22, 51, 85, 0.2)']}},axisTick: {show: false,interval: 'auto'},axisLine: {lineStyle: {color: itemColor[0]}},axisLabel: {showLabel: true,fontSize: fontSize(12),color: itemColor[0],// interval: 0, //使x轴文字显示全},data: xData},yAxis: [{name: '',nameTextStyle: {color: itemColor[0],fontSize: fontSize(12),},splitLine: {lineStyle: {type: "dashed",color: ['rgba(142,164,207,0.2)']}},axisLine: {lineStyle: {color: itemColor[0],}},axisTick: {show: false,},axisLabel: {margin: 3,interval: 60,fontSize: fontSize(12),formatter: function(value) {if (value == 3){return '高于平均值';}else  if (value == 1){return '低于平均值';}else  if (value == 2){return '平均值';}},color: itemColor[0]}},],series: [{data: averData,type: 'pictorialBar',barMaxWidth: '30',symbolPosition: 'end',itemStyle: {color: function(params) {if (params.data == 3){return colorList[4];}else  if (params.data == 1){return colorList[1];}else  if (params.data == 2){return colorList[0];}// 根据数据值的大小返回不同的颜色}},symbol: eicon,symbolOffset: [0, '-50%'],symbolSize: [20, 20],markLine: {symbol: ['none', 'none'],//去掉箭头itemStyle: {normal: {lineStyle: {type: 'dashed',color:colorList[0]},label: {show: false,}}},data: [{yAxis : 2,//这里设置false是隐藏不了的,可以设置为-1},]} ,zlevel: 1,},]};yyfxOption.value = option;

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

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

相关文章

【prometheus】prometheus基于consul服务发现实现监控

目录 一、consul服务发现简介 1.1 consul简介 二、prometheus配置 2.1 node-exporter服务注册到consul 2.2 修改prometheus配置文件 【Prometheus】概念和工作原理介绍_prometheus工作原理-CSDN博客 【Prometheus】k8s集群部署node-exporter 【prometheus】k8s集群部署p…

DOS学习-目录与文件应用操作经典案例-cd

欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一.前言 二.案例 三.练习 一.前言 虽然Windows 2000/XP/2003系统已经不再使用纯DOS平台,但它们内建了一个功能强大的命令行界面。在这个界面中,用户可以像在Wind…

图算法-网络流的最大流问题

相关文章: 数据结构–图的概念 图搜索算法 - 深度优先搜索法(DFS) 图搜索算法 - 广度优先搜索法(BFS) 图搜索算法 - 拓扑排序 图搜索算法-最短路径算法-戴克斯特拉算法 图搜索算法-最短路径算法-贝尔曼-福特算法 图搜索…

Linux(八) 进程间通信

目录 一、什么进程间通信 1.1 进程间通信的目的 1.2 进程间通信的概念 1.3 进程间通信的分类 二、 管道/匿名管道(pipe) 2.1 什么是管道 2.2 管道的创建 2.3 站在文件描述符角度-深度理解管道 2.4 站在内核角度-管道本质 2.5 匿名管道的读写 2.6 匿名管道的读写规则 …

如何在VS Code中安装插件并进行中文化。

相关文章推荐: 如何下载和安装Visual Studio Code(VSCode) 在使用Visual Studio Code(简称VS Code)进行开发时,安装插件可以极大地提升开发效率和使用体验。而将VS Code插件界面进行中文化,则能更好地满足中…

图形程序复用新纪元 探讨云库安全分享计划

在公司的开放式办公室中,卧龙与凤雏相邻而坐。周围的同事们都在忙碌地工作,键盘敲击声不绝于耳。卧龙眉头紧锁,全神贯注地调试着复杂的代码,仿佛在挑战编程世界的极限。而凤雏则在完成了一段代码编写后,轻松地伸展着身…

华为OD机试 - 山峰个数(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中,刷题点这里 专栏导读 本专栏收录于《华为OD机试(JAVA)真题(A卷B卷C卷)》。 刷的越多,抽中的概率越大,每一题都有详细的答题思路、详细的代码注释、样例测试…

STM32_IIC通信

IIC通信 • I2C(Inter IC Bus)是由Philips公司开发的一种通用数据总线 • 两根通信线:SCL(串行时钟线)、SDA(串行数据线) • 同步,半双工 • 带数据应答 • 支持总线挂载多…

基于SpringBoot设计模式之创建型设计模式·生成器模式

文章目录 介绍开始架构图样例一定义生成器定义具体生成器(HTML格式、markdown格式)实体类HTML格式生成器MarkDown格式生成器 测试样例 总结优点缺点 介绍 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。   如…

停车场车位引导系统是什么,停车场车位引导系统有哪些作用?

随着城市交通的快速发展,车辆的数量也在迅速增长,随之而来的就是停车难的问题,那么在城市中,如何合理的利用好现有资源,让停车资源得到合理利用呢?这就需要一套科学有效的智能停车场系统,可以帮…

2024 年第四届长三角高校数学建模竞赛B题

赛道 B:人工智能范式的物理化学家 物理和化学研究的对象日益复杂化、高维化,传统的研究范式主要是依赖于“穷举”、“试错”、“重复”等手段。面对庞大的化学空间,配方和工艺等各种参数的搜索常常止步于局部最优,无法进行配方和工…

圆上点云随机生成(人工制作模拟数据)

1、背景介绍 实际上,很多地物外表形状满足一定的几何形状结构,如圆形是作为常见一类。那么获取该类目标的点云数据便是位于一个圆上的点云数据。如下图所示为两簇典型的点云,其中一种为理想型,点均位于一个圆上,另外一簇则是近似位于一个圆上,这种更加符合真实情况。有时…