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

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

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

相关文章

近期知识点

aop (1) 要求利用AOP记录用户操作日志。内容包含以下信息:ip地址、用户名、请求的地址,请求的时间 ( 4 分) (2)要求利用AOP记录用户操作日志,日志记录到文本文件。内容包含以下信息&#xff…

LeetCode(43)快乐数【哈希表】【简单】

目录 1.题目2.答案3.提交结果截图 链接: 快乐数 1.题目 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为: 对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1,也…

IDEA maven无法下载源代码处理

1、使用idea内置maven 在idea中新增一个mvn运行项,截图如下: 输入命令: dependency:resolve -Dclassifiersources 2、如果外部maven,不使用idea内部maven 在工程目录下命令行执行命令: mvn dependency:resolve -Dclassifiersources

基于Web邮箱的邮件系统

题目: 基于web的邮件收发系统设计与实现 摘 要 计算机的应用已经越来越广泛,它从产生到完善已经差不多有50年左右的历史,更新换代速度非常快,在人们生活、工作中都发挥了不可替代的作用,几乎所有行业都离不开它,已经成…

【驱动】串口驱动分析(三)-serial driver

简介 前两节我们介绍串口驱动的框架和tty core部分。这节我们介绍和硬件紧密相关的串口驱动部分。 UART驱动部分依赖于硬件平台,而TTY驱动和具体的平台无关。虽然UART部分依赖于平台,但是不管是哪个硬件平台,驱动的思路都是一致的&#xff…

哈希思想的应用:位图、布隆过滤器及哈希切割

一.位图引入 给40定亿个不重复的无符号整数存储在文件中,如何判断一个数在不在其中? 分析:最容易想到的思路是将这些数字存储到某个能够实现快速查找的容器中,如红黑树或哈希表。 但是,10亿个字节大约占1G内存&#x…

知乎禁止转载的回答怎么复制做笔记?

问题 对于“禁止转载”的回答,右键复制是不行的,ctrl-c也不行,粘贴之后都是当前回答的标题。稍微看了代码,应该是对copy事件进行了处理。不过这样真的有用吗,真是防君子不防小人,只是给收集资料增加了许多…

IOS/安卓+charles实现抓包(主要解决证书网站无法打开问题)

安装 官网下载 https://www.charlesproxy.com/latest-release/download.do 安装charles文档 流程 上述链接解决下图问题 使用介绍 Charles介绍 上述链接看一至三即可,了解首页各个按钮的作用 charles全面使用教程及常见功能详解(较详细&#xff09…

程序/进程替换(讲解)

本文旨在讲解进程替换的知识!希望读完本文,能使读者对进程替换有更深一步的认识!!好的,废话不多说,干货来了! 进程替换的引进! 为什么要引进进程替换呢?我们创建子进程总…

(四)基于高尔夫优化算法GOA求解无人机三维路径规划研究(MATLAB代码)

一、无人机模型简介: 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献: [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、高尔夫优化算法GOA简介 高尔夫优化算法…

C++作业2

自己封装一个矩形类(Rect),拥有私有属性:宽度(width)、高度(height), 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void show() 代码&#xff1a…

js事件流与事件委托/事件代理

1 事件流 事件流分为两步,一是捕获,二是冒泡 1.1 捕获概念 捕获就是从最高层一层一层往下找到最内部的节点 1.2 冒泡概念 捕获到最小节点后,一层一层往上返回,像是气泡从最底部往上冒一样,由于水深不同压强不同&…