Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度echarts实现堆叠分离柱形图

option = {
  backgroundColor: '#0A1934',
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      margin: 20,
    },
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    show: false
  },
  series: [{
      data: [221, 188, 150, 180, 98, 211, 120],
      type: 'bar',
      stack: 'one',
      itemStyle: {
        borderWidth: 10,
        borderColor: '#0A1934',
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#2FCAFD',
          },
          {
            offset: 1,
            color: '#2450F0',
          },
        ]),
        barBorderRadius: 120
      },

      emphasis: {
        itemStyle: {
          borderColor: '#0A1934',
        }
      }
    },
    {
      data: [120, 30, 150, 80, 70, 110, 130],
      type: 'bar',
      stack: 'one', //堆叠
      barWidth: 40,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: '#FFE131',
        },
        {
          offset: 1,
          color: '#FFB200',
        },
      ]),
      itemStyle: {
        borderWidth: 10, //两个柱形图之间的间距
        borderColor: '#0A1934',
        barBorderRadius: 120
      },
      emphasis: {
        itemStyle: {
          borderColor: '#0A1934',
        }
      }

    },
    {
      data: [120, 30, 150, 80, 70, 110, 130],
      type: 'bar',
      stack: 'one', //堆叠
      barWidth: 40,
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: '#6DFF6D',
        },
        {
          offset: 1,
          color: '#00DB00',
        },
      ]),
      itemStyle: {
        borderWidth: 10, //两个柱形图之间的间距
        borderColor: '#0A1934',
        barBorderRadius: 120
      },
      emphasis: {
        itemStyle: {
          borderColor: '#0A1934',
        }
      }
    }
  ]
};
点击展开全文

相关文章

  1. 百度Echarts设置geo地图位置(上下左右)
  2. vue3项目中如何搭建Echarts图表
  3. 北京西城区什刹海街道地图
  4. 百度echarts公交线路道路拥堵分布图(嘉兴市)
  5. 百度echarts折线图动态自动切换(年/季/月/周)