echart各个柱体设置不同颜色

最新推荐文章于 2024-07-04 15:04:45 发布

芋泥芝士bao

最新推荐文章于 2024-07-04 15:04:45 发布

阅读量326

点赞数

分类专栏： js学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/kthvsxh/article/details/125388994

版权

js学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.利用itemStyle为各个柱体i设置颜色在这里插入图片描述

代码：

option = {
  title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
color: [
    '#4CD964',
    '#5AC8FA',

],
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
      ,
      itemStyle:{
									normal:{color:'#ab38ba'}
								}

     
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807],
     itemStyle:{
									normal:{color:'#ab78ba'}
								}

    }
    
  ]
};