Echarts 设置数据条颜色 宽度

news2024/12/26 11:07:05

设置数据条颜色(推荐)

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]
                    }
                  }
                }
              }
            ]

        })

      }

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

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

相关文章

如何通过linux调用企业微信发送告警消息

一、前期准备 1、企业微信具备管理企业权限。 2、服务器有公网IP或者可以将本机端口通过net映射到公网。 二、通过脚本向企业微信发送消息 1、创建sh脚本用来发送消息。 vim 2.sh 注意:脚本中xxxx信息需要在企业微信管理后台获取。 #!/bin/bash # 设置企业…

力扣:1419. 数青蛙

题目&#xff1a; 代码&#xff1a; class Solution { public:int minNumberOfFrogs(string croakOfFrogs){string s "croak";int ns.size();//首先创建一个哈希表来标明每个元素出现的次数&#xff01;vector<int>hash(n); //不用真的创建一个hash表用一个数…

一、Linux系统概述和安装

目录 1、Linux系统概述 2、Linux发行版介绍 3、虚拟机软件介绍 4、VMware安装 5、Linux系统&#xff08;CentOS&#xff09;系统安装 6、登录并查看IP地址 7、Linux连接工具CRT使用 7.1 概述 7.2 CRT安装 7.3 使用步骤 7.4 文件上传 8、Linux的快照 8.1 作用 8.2…

传统算法:使用 Pygame 实现二分查找

使用 Pygame 模块实现了二分查找的动画演示。首先,它生成一个有序数组,并通过 Pygame 在屏幕上绘制这个数组的条形图。接着,通过二分查找算法对有序数组进行查找,动画效果可视化每一步的变化。在查找的过程中,程序通过比较目标值和数组中间元素,逐步缩小搜索范围,高亮显…

Python-简单模拟斗地主洗牌发牌

额滴名片儿 &#x1f388; 博主&#xff1a;一只程序猿子 &#x1f388; 博客主页&#xff1a;一只程序猿子 博客主页 &#x1f388; 个人介绍&#xff1a;爱好(bushi)编程&#xff01; &#x1f388; 创作不易&#xff1a;如喜欢麻烦您点个&#x1f44d;或者点个⭐&#xff01…

【人工智能Ⅰ】实验5:AI实验箱应用之贝叶斯

实验5 AI实验箱应用之贝叶斯 一、实验目的 1. 用实验箱的摄像头拍摄方块上数字的图片&#xff0c;在图像处理的基础上&#xff0c;应用贝叶斯方法识别图像中的数字并进行分类。 二、实验内容和步骤 1. 应用实验箱机械手臂上的摄像头拍摄图像&#xff1b; 2. Opencv处理图像…

生成对抗网络(GAN)手写数字生成

文章目录 一、前言二、前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09; 二、什么是生成对抗网络1. 简单介绍2. 应用领域 三、网络结构四、构建生成器五、构建鉴别器六、训练模型1. 保存样例图片2. 训练模型 七、生成动图 一、前言 我的环境&#xff1…

可行性研究:2023年废旧金属回收行业前景及市场数据分析

废品收购是再生资源行业的重要业务之一。是指将各种废弃物品分类后按不同种类和性能卖给不同的生产厂商或直接出售给再制造厂家&#xff08;如重新使用报废汽车拆解的零件&#xff09;。废旧金属是指暂时失去使用价值的金属或合金制品&#xff0c;一般的废旧金属都含有有用的金…

车牌限行_分支结构的C语言实现xdoj7

试题名称 车牌限行 时间限制: 1 秒 内存限制: 256KB 问题描述 问题描述 受雾霾天气影响&#xff0c;某市决定当雾霾指数超过设定值时对车辆进行限行&#xff0c;假设车牌号全为数字&#xff0c;且长度不超过6位&#xff0c;限行规则如下&#xff1a; &#xff08;…

C++相关闲碎记录(2)

1、误用shared_ptr int* p new int; shared_ptr<int> sp1(p); shared_ptr<int> sp2(p); //error // 通过原始指针两次创建shared_ptr是错误的shared_ptr<int> sp1(new int); shared_ptr<int> sp2(sp1); //ok 如果对C相关闲碎记录(1)中记录的shar…

AI - Steering behaviorsII(碰撞避免,跟随)

Steering Behaviors系统中的碰撞避免&#xff0c;路径跟随&#xff0c;队长跟随 Collision Avoid 在物体前进的方向&#xff0c;延伸一定长度的向量进行检测。相当于物体对前方一定可使范围进行检测障碍物的碰撞 延伸的向量与碰撞物圆心的距离小于碰撞物的半径&#xff0c;则…

docker-compose脚本编写及常用命令

安装 linux DOCKER_CONFIG/usr/local/lib/docker/cli-plugins sudo mkdir -p $DOCKER_CONFIG/cli-plugins sudo curl -SL https://521github.com/docker/compose/releases/download/v2.6.1/docker-compose-linux-x86_64 -o $DOCKER_CONFIG/cli-plugins/docker-compose sudo c…

numpy知识库:深入理解numpy.resize函数和数组的resize方法

前言 numpy中的resize函数顾名思义&#xff0c;可以用于调整数组的大小。但具体如何调整&#xff1f;数组形状变了&#xff0c;意味着数组中的元素个数发生了变化(增加或减少)&#xff0c;如何确定resize后的新数组中每个元素的数值呢&#xff1f;本次博文就来探讨并试图回答这…

润申信息企业标准化管理系统 SQL注入漏洞复现

0x01 产品简介 润申信息科技企业标准化管理系统通过给客户提供各种灵活的标准法规信息化管理解决方案&#xff0c;帮助他们实现了高效的标准法规管理&#xff0c;完成个性化标准法规库的信息化建设。 0x02 漏洞概述 润申信息科技企业标准化管理系统 CommentStandardHandler.as…

蓝桥杯每日一题2023.11.30

题目描述 九数组分数 - 蓝桥云课 (lanqiao.cn) 题目分析 此题目实际上是使用dfs进行数字确定&#xff0c;每次循环中将当前数字与剩下的数字进行交换 eg.1与2、3、4、、、进行交换 2与3、4、、、进行交换 填空位置将其恢复原来位置即可&#xff0c;也就直接将其交换回去即可…

鸿蒙原生应用/元服务开发-开发者如何进行真机测试

前提条件&#xff1a;已经完成鸿蒙原生应用/元服务开发&#xff0c;已经能相对熟练使用DevEco Studio,开发者自己有鸿蒙4.0及以上的真机设备。 真机测试具体流程如下 1.手机打开开发者模式 2.在项目中&#xff0c;左上角 文件(F)->项目结构 进行账号连接 3.运行

AS 之 gradle 命令

文章目录 1、命令大全2、编译命令2.1 检查依赖并编译打包2.2 编译并打 Debug 包2.3 编译打出 Debug 包并安装2.4 编译并打出 Release 包2.5 编译打出 Release 包并安装2.6 Debug/Release 编译并打印日志 3、清除命令4、卸载命令4.1 卸载 Debug/Release 安装包4.2 adb 卸载 5、调…

智能优化算法应用:基于风驱动算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于风驱动算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于风驱动算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.风驱动算法4.实验参数设定5.算法结果6.参考文献7.…

麒麟操作系统进入单用户模式

Kylin V4 桌面版&#xff1a; 启动系统后&#xff0c;在启动菜单界面选择 Kylin 4.0.2 高级选项后回车。 在高级模式选项下选择第二行 recovery mode 模式后&#xff0c;按 e 编辑。 按 e 后如下图&#xff0c;找到 linux 开头的一行&#xff0c;修改 ro 为 rw 后&#xff0c…

将项目放到gitee上

参考 将IDEA中的项目上传到Gitee仓库中_哔哩哔哩_bilibili 如果cmd运行ssh不行的话&#xff0c;要换成git bash 如果初始化后的命令用不了&#xff0c;直接用idea项放右键&#xff0c;用git工具操作