board-ui-h5

快速上手

完整引入

import Vue from 'vue';
import App from './App.vue';
import BoardUIH5 from 'board-ui-h5';
import 'board-ui-h5/dist/board-ui-h5.css';

Vue.use(BoardUIH5);

new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入

import {
    BaseCharts,
    BaseCard,
    TabButton,
} from 'board-ui-h5'

export default {
  components: {
    BaseCharts,
    BaseCard,
    TabButton,
  }
}

具体事例

BaseCard

<base-card>
  <template slot="card-title">
    标题
  </template>
  <template slot="card-body">
    内容
  </template>
</base-card>

BaseCharts

<base-charts name="chart" :data="chartData" @getTooltipParams="getTooltipParams">
</base-charts>
// 柱状图|条形图
chartData = {
  title: '柱状图|条形图',
  legendShow: true,
  chartInfoShow: true,
  chartInfoType: 'legend',
  yAxis_ratio: true,
  dataZoom: {
    interval: 7,
  },
  legend: [
    {
      type: 'a',
      name: '类1',
      yAxisUnit: '万',
      chartType: 'bar',
      color: ['#436FFD', '#589CF4'],
      // stack: 'total',
      // borderRadiusShow: false,
    },
    {
      type: 'b',
      name: '类2',
      yAxisUnit: '万',   // 计算单位
      chartType: 'bar',
      color: ['#FFAE48', '#FBD27F'],
      // stack: 'total',  // 是否是堆叠图
      // borderRadiusShow: true,  // 是否显示柱状图border
    },
    {
      type: 'rate',
      name: '利率(%)',
      chartType: 'line',
      color: ['#F22F30'], // 线条颜色
      shadowColor: ['#EC5153'],   // 线阴影颜色
      areaStyleColor: ['#FCB1B3', '#FFFFFF'],   // 面积颜色
      yAxisIndex: 1,    // 哪个y轴
      demical: 3,      // 小数位
    },
  ],
  data: [
    {name: "1月", a: 123133, b: 232311, rate: 23.12 },
  ],
},

metheds: {
  getTooltipParams(params) {}
}

// 饼图
chartData: {
  chartType: "pie",
  title: "饼图",
   // roseType: "area",
  unit: "万",   // 单位显示
  parseNumUnit: "万", // 计算单位
  colorType: {
    list: [["#436FFD", "#589CF4"], ["#3DC6D8", "#76E6F6"], ["#FFAE48", "#FBD07C"], ["#EB4A4C", "#F3908E"], ["#6D91F8", "#58E0F4"], ["#FC6817", "#F5A469"], ["#A56DF8", "#F45858"], ["#F3B81B", "#FBEF67"]],
  },  // 颜色
  data: [
    {name: 'test1', value: 1212}
  ]
},

TabButton

参数：classType：txt | tab-txt, 默认不传

<tab-button :data="tabData" classType="txt" @updateRadioTab="updateTab"></tab-button>
tabData: {
          tabDefaultValue: 'day',
          tabData: [
            { name: '日', value: 'day' },
            { name: '月', value: 'month' },
            { name: '年', value: 'year' },
          ],
        },
updateTab(val, item) {
}