# 简介

基于echarts的图表组件库，

# 安装

```
npm install vue-chart-component
```

# main.js 中引入并注册

```
import Vue from 'vue'
import App from './App.vue'
import VueChartComfrom 'vue-chart-component'
import 'vue-chart-component/vue-chart-component.css'

Vue.use(VueChartCom)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
```

# 组件

## 水球图

```

<template>
  <div style="width: 200px;height: 200px;">
    <vue-chart-liquidfill :data="liquidfillData"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      liquidfillData: {
        value: 0.8, // 必传  百分比数值 范围0-1
        colorIndex: 1, // 可选  使用的颜色序号 不传默认使用第一个颜色
        color: '64, 158, 255', // 可选  自定义颜色 参数值为rgb颜色 有此参数时默认颜色序号无效
        name: '默认样式2', // 可选  标题
        num: 12121, // 可选  数值
        thousandFormatNum: false, // 可选  数值是否千分位格式化 默认为true
        option: {
          title: {
            text: ''
          }
        }, // 可选  echarts 参数配置
        series: {}, // 可选  echarts 数值配置
      }
    }
  }
}
</script>
```

## 饼图

```
<template>
 <div>
  <vue-chart-pie :data="pieData"/>
 </div>
</template>
<script>
export default {
  data() {
    return {
      pieData: [
        {
          name: '系列1', // 必传  名称
          value: 20, // 必传  数值
          ratio: '20%', // 可选  比率
        },
        {
          name: '系列2',
          value: 40,
        },
      ],
      option: {
        title: {
          text: ''
        }
      }, // 可选  echarts 参数配置
      seriesOpts: {
        radius: ['50%', '60%'],
        center: ['30%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          color: '#B5D9FF',
          formatter: ['{title|{c0}}', '{value|{b0}}'].join('\n'),
          fontSize: 14,
          fontWeight: 600,
          rich: {
            title: {
              color: '#ffffff',
              fontSize: 30,
              fontWeight: 600,
              lineHeight: 66,
            },
          },
        },
        emphasis: {
          label: {
            show: true,
          },
        },
      }, // 可选  饼图series配置
    }
  }
}
</script>
```
