Echarts 设置数据条颜色 宽度

设置数据条颜色(推荐)

let yData = [
          {
            value: 500,
            time: '2012-11-12',
            itemStyle: //设置数据条颜色
            {
              normal: { color: 'red' }
            }
          },
          {
            value: 454,
            time: '2020-5-17'
          },
          {
            value: 544,
            time: '2022-1-22'
          },
          {
            value: 877,
            time: '2013-1-30'
          }, {
            value: 877,
            time: '2012-11-12'
          }]

在这里插入图片描述


设置数据条颜色2 (不推荐)

itemStyle:
                {
                  normal: {
                    color: pamars => {
                      let colorList = ['red', 'yellow', 'blue', 'green', 'pink']
                      return colorList[pamars.dataIndex]
                    }
                  }
                }

在这里插入图片描述


设置轴的宽度

 series:   [
             {
                name: '图例',
                type: 'bar',//图表类型
                data: yData,//图标数据
                barWidth: 25//数据条宽度
              }
            ]

在这里插入图片描述

完整配置

 draw() {

        let xData = ['华为', '小米', '苹果', '三星', '酷派']

        let yData = [{
          'value': '500',
          'time': '2012-11-12'
        },
        {
          'value': '454',
          'time': '2020-5-17'
        },
        {
          'value': '544',
          'time': '2022-1-22'
        },
        {
          'value': '877',
          'time': '2013-1-30'
        }, {
          'value': '877',
          'time': '2012-11-12'
        }]


        const myChart = this.$echarts.init(this.$refs.myChart)
        //初始化对象

        myChart.setOption({ //参数配置项


          legend: {
            show: true, //是否展示图例 

          }

          , xAxis://设置x轴数据
          {

            type: 'value'
            //设置数据

          }, yAxis://设置y轴数据
          {
            data: xData,
            type: 'category'

          }, series:
            [

              {
                name: '图例',
                type: 'bar',//图表类型
                data: yData,//图标数据
                barWidth: 25,//数据条宽度

                itemStyle:
                {
                  normal: {
                    color: pamars => {
                      let colorList = ['red', 'yellow', 'blue', 'green', 'pink']
                      return colorList[pamars.dataIndex]
                    }
                  }
                }
              }
            ]

        })

      }

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

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

相关文章

css 字体倾斜

css 字体倾斜 //左右倾斜 transform: skew(40deg, 0deg);//上下倾斜 transform: skew(0deg, 16deg);

SNAT / DNAT 自定义链

目录 linux 系统本身是没有转发功能,只有路由发送数据 NAT NAT的实现分为两类 SNAT SNAT 应用环境 SNAT 原理 SNAT 转换前提条件 例图参考 开启 SNAT 命令 临时开启 永久开启 修改 iptables 网卡 DNAT DNAT 应用环境 DNAT 原理 DNAT 转换前提条件 …

最新Midjourney绘画提示词Prompt

最新Midjourney绘画提示词Prompt 一、AI绘画工具 SparkAi【无需魔法使用】: SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT?小编这里写一个详细图文教程吧!本系统使用NestjsVueTypescript框架技术&am…

java_springboot企业人事考勤请假管理信息系统rsglxx+jsp

(1)熟练掌握Java开发的原理和方法 (2)熟练学习掌握SSM框架 (3)熟悉软件开发的流程 (4)了解中内外互联网中所主流的技术 (5)深层次的了解计算机学科领域的知识…

深入了解Java8新特性-日期时间API之ChronoUnit、ChronoField

阅读建议 嗨,伙计!刷到这篇文章咱们就是有缘人,在阅读这篇文章前我有一些建议: 本篇文章大概3000多字,预计阅读时间长需要5分钟。本篇文章的实战性、理论性较强,是一篇质量分数较高的技术干货文章&#x…

基于AT89C51单片机的秒表设计

1.设计任务 利用单片机AT89C51设计秒表,设计计时长度为9:59:59,超过该长度,报警。创新:设置重启;暂停;清零等按钮。最后10s时播放音乐提示。 本设计是采用AT89C51单片机为中心,利用其…

Java arthas分析接口性能

一、环境准备 1、arthas文档: 简介 | arthas 2、下载arthas-boot.jar https://arthas.aliyun.com/arthas-boot.jar 二、启动arthas java -jar arthas-boot.jar 输入对应pid,进入对应服务 三、排查 1、执行命令: trac 类路径 方法名 tr…

万宾科技监测设备,可燃气体监测仪特点一览

万宾科技的监测设备种类繁多,包括可燃气体监测仪、管网水位监测仪、内涝积水监测仪等。其中可燃气体监测仪是万宾科技的核心产品之一,用于监测环境中可燃气体的浓度,适用于对甲烷气体浓度进行实时监测,应用于燃气管网、排水管网、…

【快速见刊|投稿优惠】2024年机电一体与自动化技术国际学术会议(IACMAT 2024)

2024年机电一体与自动化技术国际学术会议(IACMAT 2024) 2024 International Academic Conference on Mechatronics and Automation Technology(IACMAT 2024) 一【会议简介】 2024年机电一体与自动化技术国际学术会议(IACMAT 2024)即将召开,它以“机电一体&#xff0…

filebrat+elk+kafka实现远程收集日志

20.0.0.15 kafka1 20.0.0.30 kafka2 20.0.0.40 kafka3 20.0.0.10 logstashkibana 20.0.0.20 elasticsearch 20.0.0.60 elasticsearch 注意---一个input,output要有一个 filebeat.intput Nginx----kafka.conf httpd.conf 两边同时启动 时间同步

计算机软件的分类

以功能进行分类,计算机软件通常可以分为系统软件和应用软件两大类。 系统软件:系统软件是计算机运行和管理的基本软件,包括操作系统、驱动程序、系统工具和服务程序等。操作系统是系统软件的核心,负责管理计算机的硬件资源、提供用…

模拟算法【3】——1419.数青蛙

文章目录 🍥1. 题目🥮2. 算法原理🍡3. 代码实现 🍥1. 题目 题目链接:1419. 数青蛙 - 力扣(LeetCode) 给你一个字符串 croakOfFrogs,它表示不同青蛙发出的蛙鸣声(字符串 &…

EG20网口远程下载程序使用案例

EG20网口远程下载程序使用案例 前言:本文档主要说明了使用蓝蜂虚拟网络工具通过EG20网关的网口(LAN口)远程给PLC下载程序的步骤及其注意事项。使用蓝蜂虚拟网络工具,不仅支持程序的远程下载,同样支持程序的远程上传与…

Windows 基于 VMware 虚拟机安装银河麒麟高级服务器操作系统

前言 抱着学习的态度研究一下麒麟系统的安装 银河麒麟(KylinOS)原是在“863计划”和国家核高基科技重大专项支持下,国防科技大学研发的操作系统,后由国防科技大学将品牌授权给天津麒麟,后者在2019年与中标软件合并为…

代码随想录刷题题Day2

刷题的第二天,希望自己能够不断坚持下去,迎来蜕变。😀😀😀 刷题语言:C / Python Day2 任务 977.有序数组的平方 209.长度最小的子数组 59.螺旋矩阵 II 1 有序数组的平方(重点:双指针…

snat与dnat

一.SNAT的原理介绍 1.应用环境 局域网主机共享单个公网IP地址接入Internet (私有IP不能在Internet中正常路由) 2.SNAT原理 源地址转换,根据指定条件修改数据包的源IP地址,通常被叫做源映谢 数据包从内网发送到公网时&#xf…

嵌入式数据传输及存储的C语言实现

各种类型的数据传输和存储就涉及到大小端的问题,首先要简单说下芯片的大小端问题,这里主要讨论Cortex-M内核。 M内核支持大端或者小端,实际应用中大部分内核都是小端。以STM32为例,全部都是小端,而且是芯片设计之初就固…

飞致云开源社区月度动态报告(2023年11月)

自2023年6月起,中国领先的开源软件公司FIT2CLOUD飞致云以月度为单位发布《飞致云开源社区月度动态报告》,旨在向广大社区用户同步飞致云旗下系列开源软件的发展情况,以及当月主要的产品新版本发布、社区运营成果等相关信息。 飞致云开源大屏…

Linux安全配置

进入ssh配置文件 vim /etc/ssh/sshd_config将port 22中的端口号改为5001 重启ssh服务 systemctl restart sshd拓展 sh与bash iptable与firewall ssh与sshd vps与ssh 参考: 【安全-SSH】SSH安全设置 - CSDN AppLinux VPS服务器SSH端口一键修改脚本​Linux脚本…

TA-Lib学习研究笔记——Price Transform (五)

TA-Lib学习研究笔记——Price Transform (五) 1.AVGPRICE Average Price 函数名:AVGPRICE 名称:平均价格函数 语法: real AVGPRICE(open, high, low, close) df[AVGPRICE] tlb.AVGPRICE(df[open],df[high],df[low…