echarts，多组柱状图，每个颜色不一样配置

最新推荐文章于 2024-04-03 10:57:30 发布

三妹_day

最新推荐文章于 2024-04-03 10:57:30 发布

阅读量1.2k

点赞数

分类专栏： echarts vue js问题文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_26841153/article/details/129260522

版权

vue 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

js问题

11 篇文章 0 订阅

订阅专栏

echarts

3 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用JavaScript创建一个柱状图，数据包括vardata数组中的数值，颜色由varcolorList定义，x轴标签是varparttXNames，y轴表示Kwh。每个数据系列对应varparttValueNames中的设备类型，图表包含网格设置，提示框，以及无网格线的x轴。

摘要由CSDN通过智能技术生成


var data=[
  [320, 332, 301, 334, 390,360],
  [220, 182, 191, 234, 290,320],
  [150, 232, 201, 154, 190,150],
  [320, 332, 301, 334, 390,360],
  [220, 182, 191, 234, 290,320],
  [150, 232, 201, 154, 190,150]
  ]

var colorList=['#FF872B','#DB2E64','#3092FF','#30FFFC','#EDDF2D','#D19E62']
var parttXNames=['平时','尖峰','高峰','低谷']
var parttValueNames=['电房','办公','空调','生产','消防','补偿柜']
var series = []

parttValueNames.forEach((item,index)=>{
  var obj={
    name: item,
    type: 'bar',
    barGap: 0,
    data: data[index],
    color:colorList[index],
    
  }
  series.push(obj)
})

var option = {
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            type: 'shadow'
					        }
					    },
					    grid: {
					        left: '0%',
					        right: '0%',
					        bottom: '10%',
					        top:'10%',
					        containLabel: true,
					    },
					    legend:{
					      textStyle:{
					       color:'red',
					      },
					    },
					    calculable: true,
					    xAxis: [
					        {
					            type: 'category',
					            axisTick: {
					              show: false,
					              alignWithLabel: true,
					            },
					            data: parttXNames,
					            axisLabel:{
					              color:'red',
					            },
					            splitLine: {
                      // 去除网格线
                      show: false,
                      },
                    axisTick: {
                      show: true,
                    },
                    axisLabel: {
                      color: "red",
                    },
                    axisLine: {
                      lineStyle: {
                        type: 'none',
                        color: 'red',
                        width: '1'
                      }
                    },
					        },
					        ],
					    yAxis: [
					        {
				            name:'Kwh',
				            type: 'value',
                    splitLine: {
                      // 去除网格线
                      show: true,
                    },
                    axisTick: {
                      show: true,
                    },
                    axisLabel: {
                      color: "red",
                    },
                    axisLine: {
                      lineStyle: {
                        type: 'solid',
                        color: 'red',
                        width: '1'
                      }
                    },
					        }
					    ],
					    series:series
					    
					};