Charts

柱状图

基本柱状图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar'
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar'
    }
  ]
}

export default [option1, option2]

梯形柱状图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  legend: {
    data: ['系列A', '系列B']
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      name: '系列A',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      shapeType: 'leftEchelon'
    },
    {
      name: '系列B',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      shapeType: 'rightEchelon'
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  legend: {
    data: ['系列A', '系列B']
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      name: '系列A',
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar',
      shapeType: 'leftEchelon'
    },
    {
      name: '系列B',
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar',
      shapeType: 'rightEchelon'
    }
  ]
}

export default [option1, option2]

渐变柱状图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      gradient: {
        color: ['#37a2da', '#67e0e3']
      }
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar',
      gradient: {
        color: ['#67e0e3', '#37a2da']
      }
    }
  ]
}

export default [option1, option2]

同组柱状图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  legend: {
    data: ['系列A', '系列B']
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      name: '系列A',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      stack: 'a'
    },
    {
      name: '系列B',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      stack: 'a'
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  legend: {
    data: ['系列A', '系列B']
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      name: '系列A',
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar',
      stack: 'a'
    },
    {
      name: '系列B',
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar',
      stack: 'a'
    }
  ]
}

export default [option1, option2]

背景柱状图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      backgroundBar: {
        show: true
      }
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value',
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar',
      backgroundBar: {
        show: true
      }
    }
  ]
}

export default [option1, option2]

横向柱状图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第一周',
    data: 'value'
  },
  yAxis: {
    name: '销售额',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      animationCurve: 'easeOutBack'
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第一周',
    data: 'value'
  },
  yAxis: {
    name: '销售额',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar',
      animationCurve: 'easeOutBack'
    }
  ]
}

export default [option1, option2]

系列柱状图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      stack: 'a'
    },
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      stack: 'a'
    },
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar'
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar',
      stack: 'a'
    },
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar',
      stack: 'a'
    },
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar'
    }
  ]
}

export default [option1, option2]

描边柱状图

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第一周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      type: 'bar',
      gradient: {
        color: ['rgba(251, 114, 147, .6)', 'rgba(251, 114, 147, .1)']
      },
      barStyle: {
        stroke: '#fb7293'
      }
    }
  ]
}

const option2 = {
  title: {
    text: '周销售额趋势'
  },
  xAxis: {
    name: '第二周',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    name: '销售额',
    data: 'value'
  },
  series: [
    {
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      type: 'bar',
      gradient: {
        color: ['rgba(251, 114, 147, .6)', 'rgba(251, 114, 147, .1)'],
        local: false
      },
      barStyle: {
        stroke: '#fb7293'
      }
    }
  ]
}

export default [option1, option2]

极简柱状图

切换数据
重置
点击以展开或折叠
const option1 = {
  grid: {
    left: 20,
    right: 20,
    top: '5%',
    bottom: '5%'
  },
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  yAxis: {
    data: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      type: 'bar',
      data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
      label: {
        show: true,
        position: 'center',
        offset: [0, 0],
        style: {
          fill: '#fff'
        }
      },
      backgroundBar: {
        show: true
      },
      animationCurve: 'easeOutBounce'
    }
  ]
}

const option2 = {
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  yAxis: {
    data: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      type: 'bar',
      data: [2339, 1899, 2118, 1790, 3265, 4465, 3996],
      label: {
        show: true,
        position: 'center',
        offset: [0, 0],
        style: {
          fill: '#fff'
        }
      },
      backgroundBar: {
        show: true
      },
      animationCurve: 'easeOutBounce'
    }
  ]
}

export default [option1, option2]

柱线混用

切换数据
重置
点击以展开或折叠
const option1 = {
  title: {
    text: '气温与降雨量走势图'
  },
  legend: {
    data: ['降雨量', '气温'],
    bottom: 10
  },
  xAxis: {
    data: [
    '一月份', '二月份', '三月份', '四月份', '五月份', '六月份',
    '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份'
    ],
    axisLabel: {
      style: {
        rotate: 20,
        textAlign: 'left',
        textBaseline: 'top'
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: [
    {
      name: '降雨量',
      data: 'value',
      min: 0,
      max: 300,
      interval: 50,
      splitLine: {
        style: {
          lineDash: [3,3]
        }
      },
      axisLabel: {
        formatter: '{value} ml'
      },
      axisTick: {
        show: false
      }
    },
    {
      name: '气温',
      data: 'value',
      position: 'right',
      min: 0,
      max: 30,
      interval: 5,
      splitLine: {
        show: false
      },
      axisLabel: {
        formatter: '{value} °C',
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '降雨量',
      data: [
        175, 125, 90, 130, 45, 65,
        65, 47, 50, 52, 45, 37
      ],
      type: 'bar',
      gradient: {
        color: ['#37a2da', '#67e0e3']
      },
      animationCurve: 'easeOutBounce'
    },
    {
      name: '气温',
      data: [
      23, 18, 16, 14, 10, 8,
      6, 6, 6, 6, 6, 5
      ],
      type: 'line',
      yAxisIndex: 1,
      animationCurve: 'easeOutBounce'
    }
  ]
}

const option2 = {
  title: {
    text: '气温与降雨量走势图'
  },
  legend: {
    data: ['降雨量', '气温'],
    bottom: 10
  },
  xAxis: {
    data: [
      '一月份', '二月份', '三月份', '四月份', '五月份', '六月份',
      '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份'
    ],
    axisLabel: {
      style: {
        rotate: 20,
        textAlign: 'left',
        textBaseline: 'top'
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: [
    {
      name: '降雨量',
      data: 'value',
      min: 0,
      max: 300,
      interval: 50,
      splitLine: {
        style: {
          lineDash: [3,3]
        }
      },
      axisLabel: {
        formatter: '{value} ml'
      },
      axisTick: {
        show: false
      }
    },
    {
      name: '气温',
      data: 'value',
      position: 'right',
      min: 0,
      max: 30,
      interval: 5,
      splitLine: {
        show: false
      },
      axisLabel: {
        formatter: '{value} °C',
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '降雨量',
      data: [
        155, 135, 100, 120, 40, 55,
        70, 50, 45, 55, 40, 37
      ],
      type: 'bar',
      gradient: {
        color: ['#37a2da', '#67e0e3']
      },
      animationCurve: 'easeOutBounce'
    },
    {
      name: '气温',
      data: [
        22, 18, 15, 14, 11, 9,
        5, 5, 5, 5, 5, 4
      ],
      type: 'line',
      yAxisIndex: 1,
      animationCurve: 'easeOutBounce'
    }
  ]
}

export default [option1, option2]

← 饼状图 →