基础用法

<template>
  <db-echarts-bar :options="options" :series="series">
  </db-echarts-bar>
</template>
<script>
  // const {
  //   DbEchartsBar
  // } = require('@/echarts/index.js')
  export default {
    data() {
      return {
        options: {
          title: {
            text: '柱状图'
          },
          xAxis: {
            data: [
              "01月",
              "02月"
            ]
          }
        },
        series: [
          {
            name: '战队1',
            data: [1220, 1223, 1300, 934, 1290, 1330, 1320, 1220, 1330, 1022, 890]
          },
          {
            name: '战队2',
            data: [1820, 2932, 2901, 2934, 1290, 1630, 2420, 2220, 3330, 2022, 2890],
            itemStyle: {
              normal: {
                label: {
                  formatter: "{c}" + "人"
                },
              }
            },
          },
          {
            name: '战队3',
            data: [664, 242, 342, 546, 345, 234, 342, 437, 268, 387, 237],
          }
        ]
      }
    },
    // components: {
    //   DbEchartsBar
    // }
  }
</script>

Expand Copy Copy

• 可以通过设置color来设置当前颜色,颜色为 色板 中的颜色

<template>
  <db-echarts-bar :options="options" :series="series" color="danger">
  </db-echarts-bar>
</template>
<script>
  // const {
  //   DbEchartsBar
  // } = require('@/echarts/index.js')
  export default {
    data() {
      return {
        options: {
          title: {
            text: '柱状图'
          },
          xAxis: {
            data: [
              "01月",
              "02月"
            ]
          }
        },
        series: [
          {
            name: '战队1',
            data: [1220, 1223, 1300, 934, 1290, 1330, 1320, 1220, 1330, 1022, 890]
          },
          {
            name: '战队2',
            data: [1820, 2932, 2901, 2934, 1290, 1630, 2420, 2220, 3330, 2022, 2890],
            itemStyle: {
              normal: {
                label: {
                  formatter: "{c}" + "人"
                },
              }
            },
          },
          {
            name: '战队3',
            data: [664, 242, 342, 546, 345, 234, 342, 437, 268, 387, 237],
          }
        ]
      }
    },
    // components: {
    //   DbEchartsBar
    // }
  }
</script>

Expand Copy Copy

• 如果是过长可以使用滚动模式

<template>
  <db-echarts-bar :options="options" :series="series">
  </db-echarts-bar>
</template>
<script>
  // const {
  //   DbEchartsBar
  // } = require('@/echarts/index.js')
  export default {
    data() {
      return {
        options: {
          title: {
            text: '柱状图'
          },
          xAxis: {
            data: [
              "01月",
              "02月",
              "03月",
              "04月",
              "05月"
            ]
          },
          dataZoom: [{
            type: 'slider',
            show: true, //flase直接隐藏图形
            xAxisIndex: [0],
            left: '9%', //滚动条靠左侧的百分比
            bottom: -5,
            start: 0,//滚动条的起始位置
            end: 50 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
          }]
        },
        series: [
          {
            name: '战队1',
            data: [1220, 1223, 1300, 934, 1290, 1330, 1320, 1220, 1330, 1022, 890]
          },
          {
            name: '战队2',
            data: [1820, 2932, 2901, 2934, 1290, 1630, 2420, 2220, 3330, 2022, 2890],
            itemStyle: {
              normal: {
                label: {
                  formatter: "{c}" + "人"
                },
              }
            },
          },
          {
            name: '战队3',
            data: [664, 242, 342, 546, 345, 234, 342, 437, 268, 387, 237],
          }
        ]
      }
    },
    // components: {
    //   DbEchartsBar
    // }
  }
</script>

Expand Copy Copy

• 通过mode来设置不同模式 目前有contrast和default两种模式

<template>
  <db-echarts-bar :options="options" :series="series" mode="contrast" height="600px">
  </db-echarts-bar>
</template>
<script>
  // const {
  //   DbEchartsBar
  // } = require('@/echarts/index.js')
  export default {
    data() {
      return {
        options: {
          legend: {
            data: ['战队1', '战队2', '战队3']
          },
          title: {
            text: '柱状图'
          },
          yAxis: {
            data: [
              "01月",
              "02月",
              "03月",
              "04月",
              "05月",
              "06月",
              "07月",
              "08月",
              "09月",
              "10月",
              "11月",
              "12月",
            ]
          }
        },
        series: [
          {
            name: '战队1',
            data: [1220, 1223, 1300, 934, 1290, 1330, 1320, 1220, 1330, 1022, 890, 1100]
          },
          {
            name: '战队2',
            data: [1820, 2932, 2901, 2934, 1290, 1630, 2420, 2220, 3330, 2022, 2890, 2980]
          },
          {
            name: '战队3',
            data: [664, 242, 342, 546, 345, 234, 342, 437, 268, 387, 237, 320],
          }
        ]
      }
    },
    // components: {
    //   DbEchartsBar
    // }
  }
</script>

Expand Copy Copy