echarts多个柱状图

最新推荐文章于 2024-07-31 14:40:54 发布

小小小菜鸟1997

最新推荐文章于 2024-07-31 14:40:54 发布

阅读量4.5k

点赞数 1

本文链接：https://blog.youkuaiyun.com/HuLuWa1997/article/details/116988506

版权

本文将展示如何利用Echarts库在同一个图表中绘制多个柱状图，实现数据对比和展示的高效方式。通过实例代码和步骤，帮助读者理解如何配置Echarts选项，以实现多个柱状图的绘制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   option1: {
        color: [
          '#2777EC',
          '#2EACFF',
          '#FFA61C',
          '#2EC054',
          '#F28685',
          '#8C64D7'
        ],
        legend: {
          show: true,
          right: '5%',
          itemWidth: 16,
          itemHeight: 11
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          x: '7%',
          y: '15%',
          x2: '3%',
          y2: '15%'
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)'
              }
            },
            axisLabel: {
              show: true,
              // margin: 20,
              textStyle: {
                color: '#000'
              }
            },
            axisTick: {
              show: false
            },
            // boundaryGap: true,
            data: ['2017年', '2018年', '2019年', '2020年']
          }
        ],

        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(151, 151, 151, 1)'
              }
            },
            axisLabel: {
              show: true,
              // margin: 20,
              textStyle: {
                color: '#000'
              }
            },
            axisTick: {
              show: true,
              color: 'rgba(151, 151, 151, 1)'
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(226, 232, 236, 1)',
                type: 'dashed'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['#fff', 'rgba(245, 246, 250, 1)']
              }
            }
          }
        ],
        series: [
          {
            name: '未下发',
            type: 'bar',
            smooth: false,
            barWidth: 8,
            // showSymbol: false,/
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: '#157DFF'
              }
            },
            data: [100, 138, 150, 153, 180]
          },
          {
            name: '已下发',
            barWidth: 8,
            type: 'bar',
            smooth: false,
            // showSymbol: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: '#5FD77E'
              }
            },
            data: [233, 233, 200, 180, 199]
          },
          {
            name: '已上报',
            barWidth: 8,
            type: 'bar',
            smooth: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: '#F7B500'
              }
            },
            data: [154, 189, 250, 210, 300]
          },
          {
            name: '已发布',
            barWidth: 8,
            type: 'bar',
            smooth: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: '#F7B500'
              }
            },
            data: [158, 198, 205, 220, 310]
          },
          {
            name: '已考核',
            barWidth: 8,
            type: 'bar',
            smooth: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: '#F7B500'
              }
            },
            data: [180, 189, 280, 250, 320]
          },
          {
            name: '已完成',
            barWidth: 8,
            type: 'bar',
            smooth: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: '#F7B500'
              }
            },
            data: [154, 189, 250, 210, 300]
          }
        ]
      },

效果如下：
在这里插入图片描述