echarts柱状图-圆角条形图

一、柱状图

 

const option = {
          color: ['#D1E5FD','#1B7BF7'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            bottom: 0,
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 40
            // padding: [5, 20]
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisLine: {
                lineStyle: {
                  color: '#D1DBE7',
                  type: 'dashed'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#677C97',
                fontSize: 14
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#D1DBE7'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#677C97',
                fontSize: 14
              },
              splitLine: {
                lineStyle: {
                  color: ['#E8EDF4'],
                  type: 'dashed'
                }
              }
            }
          ],
          series: [
            {
              name: '总数',
              type: 'bar',
              z:"-1",
              barGap: '-100%',
              emphasis: {
                disabled: false,
                focus: 'self',
                itemStyle: {
                  color: '#D1E5FD'
                }
              },
              barWidth: 40,
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '完全正确数量',
              type: 'bar',
              // stack: '总数',
              emphasis: {
                disabled: false,
                focus: 'self',
                itemStyle: {
                  color: '#1B7BF7'
                }
              },
              barWidth: 40,
              data: [120, 132, 101, 134, 90, 230, 210]
            }
          ]
        };

二、条形图

const data = {
          totalList: [120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120,120],
          correctList: [90,100,110,70,80,80,90,60,70,80,70,60,80,70,50,90,70]
        }
        const option = {
          color: ['#E3EEFF','#6D9BFF'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            bottom: 10,
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 40
            // padding: [5, 20]
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '3%',
            bottom: '6%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'value',
              // data: data.timeList,
              axisLine: {
                lineStyle: {
                  color: '#D8E7FF'
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#405B84'
              }
            }
          ],
          yAxis: [
            {
              type: 'category',
              axisLine: {
                lineStyle: {
                  color: '#D8E7FF'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#405B84'
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: ['#E8EDF4'],
                  type: 'dashed'
                }
              },
              data: ['张丽莉','张丽丽','张嘉欣','李童','赵佳佳','孙丽','张力','张丽莉','张丽丽','张嘉欣','李童','赵佳佳','孙丽','张力','顾晓晓','李淑芳','孙玉明']
            }
          ],
          series: [
            {
              name: '总数',
              type: 'bar',
              z:"-1",
              barGap: '-100%',
              emphasis: {
                disabled: false,
                focus: 'self',
                itemStyle: {
                  color: '#D1E5FD'
                }
              },
              barWidth: 16,
              itemStyle: {
                emphasis: {
                  barBorderRadius: 9
                },
                normal: {
                  barBorderRadius: 9
                }
              },
              data: data.totalList
            },
            {
              name: '完全正确数量',
              type: 'bar',
              // stack: '总数',
              emphasis: {
                disabled: false,
                focus: 'self',
                itemStyle: {
                  color: '#1B7BF7'
                }
              },
              barWidth: 16,
              itemStyle: {
                emphasis: {
                  barBorderRadius: 9
                },
                normal: {
                  barBorderRadius: 9
                }
              },
              data: data.correctList
            }
          ]
        };