echarts 多柱状图 不同背景色设置 柱图间隔为空(柱子的宽度)

本文主要是介绍echarts 多柱状图 不同背景色设置 柱图间隔为空(柱子的宽度),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

option = {color: ['#00da9c', '#005193', '#deb434', '#5fb878', '#ffb980', '#d87a80', '#23c6c8'],tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',},},grid: {//控制整体布局left: '10%',right: '10%',bottom: '15%',top: '5%',containLabel: true,},legend: {data: ['前年', '去年', '今年', '平均'],align: 'right',right: 10,textStyle: {color: '#999999',},itemWidth: 10,itemHeight: 10,itemGap: 35,},xAxis: {type: 'category',data: ['10月', '11月', '12月', '1月'],splitLine: {show: false,},axisLine: {lineStyle: {color: '#DFE3E9', // x轴颜色width: 1, // 粗细},},axisLabel: {color: '#999999', // x轴刻度名称颜色interval: 0, //代表显示所有x轴标签显示rotate: 45, //代表逆时针旋转45度},splitArea: {show: true,interval: 0,areaStyle: {color: ['#f3f2f2', '#eceaea'],},},},yAxis: [{type: 'value',axisLabel: {color: '#999999', // y轴刻度名称颜色},splitLine: {show: true,lineStyle: {type: 'dashed',},},axisTick: {//y轴刻度线show: false,},axisLine: {//y轴show: false,},},],series: [{name: '前年',type: 'bar',barGap: 0,// barWidth : 30,//柱图宽度barMaxWidth:30,//最大宽度data: [230, 180, 80, 130],},{name: '去年',type: 'bar',barGap: 0,data: [220, 154, 90, 150],},{name: '今年',type: 'bar',barGap: 0,data: [220, 130, 90, 180],},],
};

这篇关于echarts 多柱状图 不同背景色设置 柱图间隔为空(柱子的宽度)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/304915

相关文章

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

电脑密码怎么设置? 一文读懂电脑密码的详细指南

《电脑密码怎么设置?一文读懂电脑密码的详细指南》为了保护个人隐私和数据安全,设置电脑密码显得尤为重要,那么,如何在电脑上设置密码呢?详细请看下文介绍... 设置电脑密码是保护个人隐私、数据安全以及系统安全的重要措施,下面以Windows 11系统为例,跟大家分享一下设置电脑密码的具体办php法。Windo

如何设置vim永久显示行号

《如何设置vim永久显示行号》在Linux环境下,vim默认不显示行号,这在程序编译出错时定位错误语句非常不便,通过修改vim配置文件vimrc,可以在每次打开vim时永久显示行号... 目录设置vim永久显示行号1.临时显示行号2.永www.chinasem.cn久显示行号总结设置vim永久显示行号在li

Linux:alias如何设置永久生效

《Linux:alias如何设置永久生效》在Linux中设置别名永久生效的步骤包括:在/root/.bashrc文件中配置别名,保存并退出,然后使用source命令(或点命令)使配置立即生效,这样,别... 目录linux:alias设置永久生效步骤保存退出后功能总结Linux:alias设置永久生效步骤

java脚本使用不同版本jdk的说明介绍

《java脚本使用不同版本jdk的说明介绍》本文介绍了在Java中执行JavaScript脚本的几种方式,包括使用ScriptEngine、Nashorn和GraalVM,ScriptEngine适用... 目录Java脚本使用不同版本jdk的说明1.使用ScriptEngine执行javascript2.

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2

四种简单方法 轻松进入电脑主板 BIOS 或 UEFI 固件设置

《四种简单方法轻松进入电脑主板BIOS或UEFI固件设置》设置BIOS/UEFI是计算机维护和管理中的一项重要任务,它允许用户配置计算机的启动选项、硬件设置和其他关键参数,该怎么进入呢?下面... 随着计算机技术的发展,大多数主流 PC 和笔记本已经从传统 BIOS 转向了 UEFI 固件。很多时候,我们也

Linux中chmod权限设置方式

《Linux中chmod权限设置方式》本文介绍了Linux系统中文件和目录权限的设置方法,包括chmod、chown和chgrp命令的使用,以及权限模式和符号模式的详细说明,通过这些命令,用户可以灵活... 目录设置基本权限命令:chmod1、权限介绍2、chmod命令常见用法和示例3、文件权限详解4、ch

SpringBoot项目引入token设置方式

《SpringBoot项目引入token设置方式》本文详细介绍了JWT(JSONWebToken)的基本概念、结构、应用场景以及工作原理,通过动手实践,展示了如何在SpringBoot项目中实现JWT... 目录一. 先了解熟悉JWT(jsON Web Token)1. JSON Web Token是什么鬼

使用Spring Cache时设置缓存键的注意事项详解

《使用SpringCache时设置缓存键的注意事项详解》在现代的Web应用中,缓存是提高系统性能和响应速度的重要手段之一,Spring框架提供了强大的缓存支持,通过​​@Cacheable​​、​​... 目录引言1. 缓存键的基本概念2. 默认缓存键生成器3. 自定义缓存键3.1 使用​​@Cacheab