vue-chart-component

简介

基于echarts的图表组件库，

安装

npm install vue-chart-component

main.js 中引入并注册

import Vue from 'vue'
import App from './App.vue'
import VueChartCom from '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-base :data="baseData" :xAxisData="xAxisData"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      baseData: [
	{
          type: 'line', // 可选  图表类型 默认柱图bar
          name: '系列1', // 必传  名称
          value: [10, 20, 30, 40], // 必传  数值
          showYAxis: true, // 可选  是否显示y轴
          position: 'right', // y轴位置 默认left
          yAxisName: '单位：%', // 可选  y轴名称
          stack: true, // 可选  是否为堆叠柱图 默认false  type值为bar且至少有两组柱图时有效
	  series: {}, // 可选  自定义series配置
	},
	{
	  name: '柱图',
          value: [10, 20, 30, 40]
	}
      ], // 每个对象为一组数据  可同时绘制柱图、折线图、堆叠柱图
      xAxisData: ['2023-01', '2023-02', '2023-03', '2023-04'], // 必传  x轴数据
      title: '', // 可选  标题
      option: {
        title: {
          text: ''
        }
      }, // 可选  echarts 参数配置
    }
  }
}
</script>

饼图

<template>
 <div>
  <vue-chart-pie :data="pieData" :option="option" :seriesOpts="seriesOpts"/>
 </div>
</template>
<script>
export default {
  data() {
    return {
      pieData: [
        {
          name: '系列1', // 必传  名称
          value: 20, // 必传  数值
          ratio: '20%', // 可选  比率
	  thousandFormatNum: true, // 可选  数值是否千分位格式化 默认为false
        },
        {
          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>

水球图

<template>
  <div style="width: 200px;height: 200px;">
    <vue-chart-liquidfill :data="liquidfillData" :option="option" :series="series" />
  </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: true, // 可选  数值是否千分位格式化 默认为false
      },
      option: {
        title: {
          text: ''
        }
      }, // 可选  echarts 参数配置
      series: {}, // 可选  echarts 数值配置
    }
  }
}
</script>

圆环图

<template>
  <div style="width: 200px;height: 200px;">
    <vue-chart-ring :data="ringData" :option="option" :series="series"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ringData: {
        value: 80, // 必传  百分比数值 范围0-100
        colorIndex: 1, // 可选  使用的颜色序号 不传默认使用第一个颜色
        title: '圆环', // 可选  标题
      },
      option: {
        title: {
          text: ''
        }
      }, // 可选  echarts 参数配置
      series: {}, // 可选  echarts 数值配置
    }
  }
}
</script>