VUE使用v-charts的基本配置

VUE使用v-charts的基本配置

1、柱状图配置

<template>
  <div>
    <ve-histogram
      :data="dataAs"
      :extend="extend"
      :legend-visible="false"
      :settings="chartSet"
      height="280px" />
  </div>
</template>

<script>
export default {
  name: 'Bar',
  props: {
    height: {
      type: Number,
      default: 255
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    position: {
      type: String,
      default: 'name*count'
    }
  },
  data () {
    return {
      chartSet: {
        labelMap: {
          age: '年龄' // 显示的浮动的变量替换
        }
      },
      extend: {
        color: '#429fff', // 设置的主颜色
        yAxis: {
          // 是否显示y轴线条
          axisLine: {
            show: false
          },
          // 纵坐标网格线设置，同理横坐标，分割线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed' // 虚线  solid 为实线
            }
          },
          // 线条位置
          position: 'left',
          splitNumber: 4 // y轴的数量分割比例 
        },
        xAxis: {
          name: '', // 坐标轴名称。
          nameLocation: 'end', // 坐标轴名称显示位置。
          axisLabel: {// 坐标轴刻度标签的相关设置。
            interval: 0,
            rotate: 0,
            textStyle: { // x轴文字
              color: '#171616',
              fontSize: 13
            }
          },
          axisLine: { // 设置轴线的属性
            show: true,
            lineStyle: {
              color: '#909090',
              width: 1
            }
          }
        },
        series: {
          label: { show: true, position: 'top' }
        }
        // 数据过多时出现横向滚动条
        /* dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 50
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 50
          }
        ] */
      },
      chartData: { // 主要数据来源
        columns: ['name', 'age'],
        rows: [ {name: '张三', age: 25} ]
      }
    }
  },
  computed: {
    dataAs () {
      const data = this.chartData
      const rows = this.data
      rows.forEach((row) => {
        data.rows.push({ name: row.x, value: row.y })
      })
      return data
    }
  }
}
</script>