当前位置: 首页 > news >正文

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.lryc.cn/news/249716.html

相关文章:

  • 2023-11-30 通过中缀表达式转换后缀表达式, 用C语言完成一个简单的计算器
  • 设计模式总目录
  • 通俗理解词向量模型,预训练模型,Transfomer,Bert和GPT的发展脉络和如何实践
  • 键入网址到网页显示,期间发生了什么?(计算机网络)
  • python-GC机制、装饰器、生成器、迭代器、三元表达式、列表生成式、生成器表达式、函数递归、面向对象、
  • Linux命令--根据端口号查看进程号(PID)
  • LangChain 9 模型Model I/O 聊天提示词ChatPromptTemplate, 少量样本提示词FewShotPrompt
  • 使用 Vue3 + Pinia + Ant Design Vue3 搭建后台管理系统
  • SpringCloud核心组件
  • 基于C++11实现将IP地址、端口号和连接状态写入文件
  • 非空断言,
  • Spark---创建DataFrame的方式
  • 瑜伽学习零基础入门,各种瑜伽教学方法全集
  • pycharm编译报错处理
  • “华为杯”研究生数学建模竞赛2019年-【华为杯】E题:基于多变量的全球气候与极端天气模型的构建与应用(附python代码实现)
  • 冒泡排序(适合编程新手的体质)
  • pdfjs,pdf懒加载
  • K8s 多租户方案的挑战与价值
  • 单链表相关经典算法OJ题:移除链表元素
  • 【JUC】十九、volatile与内存屏障
  • 下载MySQL JDBC驱动的方法
  • C/C++ 实现FTP文件上传下载
  • 第十三章 python之爬虫
  • scrum 敏捷开发
  • 亚信科技AntDB数据库完成中国信通院数据库迁移工具专项测试
  • 深度学习(一):Pytorch之YOLOv8目标检测
  • EasyExcel如何读取全部Sheet页数据方法
  • GDPU 数据结构 天码行空12
  • 什么是 Proxy?
  • Vue系列:Vue Element UI中,使用按钮实现视频的播放、停止、停止后继续播放、播放完成后重新播放功能