介绍

本组件基于 echarts，用于展示相关数据，组件包括以下三个区域：

1. 标题区域：支持设置 0-20 个长度的标题；
2. 功能区域：目前只支持“截图”、“下钻”功能；
3. 展示区域：用户可参照 echarts 的配置方式，展示不同的图表。

快速上手

1. 安装

npm i oibp-echarts

2. 在项目中引入

// main.js

import Vue from 'vue'

// 引入 OibpEcharts 组件
import OibpEcharts from 'oibp-echarts'

Vue.component('oibp-echarts', OibpEcharts)

3. 在项目中使用

<template>
  <div class="home">
    <div class="oibpEcharts-container">
      <oibp-echarts
        :title="title" :show-drill-down="showDrillDown" :show-screenshot="showScreenshot" :option="option"
        @drillDown="handleDrillDown"
      />
    </div>
  </div>
</template>

<script>
const ringOption = {
  title: {
    text: '环形图示例',
    left: 'center',
    textStyle: { fontSize: 14, color: '#333' }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)',
  },
  legend: {
    orient: 'horizontal',
    bottom: 0,
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      itemStyle: { borderColor: '#fff', borderWidth: 1 },
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' },
      ],
    }
  ]
}

export default {
  name: 'Home',
  data() {
    return {
      title: '标题',
      showScreenshot: true,
      showDrillDown: true,
      option: ringOption
    }
  },
  methods: {
    handleDrillDown() {
      console.log('下钻')
    }
  }
}
</script>

<style scoped>
.oibpEchartBox-container {
  display: flex;
  overflow-x: auto;
}
</style>

组件支持的属性及方法

| 属性/方法 | 描述 | 类型 | 默认值 | |-----------------|-----------------------------------------------------------------------|----------|--------| | title | 组件标题 | string | '' | | show-drill-down | 是否显示下钻功能 | boolean | true | | show-screenshot | 是否显示截图功能 | boolean | true | | option | Echarts 配置，请参考 Echarts 官网 | object | {} | | drillDown | 点击下钻的回调函数 | function | - |

注意事项

本组件使用了 flex 布局，建议包裹组件的容器也开启 flex 布局。如：

<template>
  <div class="home">
    <div class="oibpEcharts-container">
      <oibp-echarts />
    </div>
  </div>
</template>

<style scoped>
.oibpEcharts-container {
  display: flex;
}
</style>