vue 结合v-chart 实现柱状图

依赖版本：

 "v-charts": "^1.19.0",

"echarts": "^4.8.0",

 

1.结构

 <ve-histogram

        v-bind="{

          ...histogramOpt,

        }"

        height="500px"

        :colors="colorList"

      >

      </ve-histogram>

2. 数据和颜色

 histogramOpt() {

      return {

        xAxis: {

          data: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],

        },

        legend: {

          bottom: 0,

          icon: 'rect',

          itemWidth: 15,

          itemGap: 40,

        },

        series: [

          {

            name: 'Forest',

            type: 'bar',

            barGap: '10%',

            emphasis: {

              focus: 'series',

            },

            data: [320, 1332, 1301, 1334, 1150, 1232],

          },

          {

            name: 'Steppe',

            type: 'bar',

            emphasis: {

              focus: 'series',

            },

            data: [1220, 182, 991, 1234, 1150, 122],

          },

          {

            name: 'Desert',

            type: 'bar',

            emphasis: {

              focus: 'series',

            },

            data: [1150, 1232, 1201, 154, 150, 1232],

          },

          {

            name: 'Wetland',

            type: 'bar',

            emphasis: {

              focus: 'series',

            },

            data: [198, 1177, 1101, 391, 1150, 232],

          },

        ],

      }

    },

    colorList() {

      return ['#4472c4', '#ed7d31', '#a5a5a5', '#ffc000']

    },