vue-chart-component
v0.0.8
Published
基于echarts的图表组件库,
Downloads
12
Readme
简介
基于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>