废话少说,直接上代码
安装echarts
npm i echarts --save
<template>
<div class="about">
<mulCircleCharts :chartData="MulChartData" height="500px" width="700px" />
</div>
</template>
<script>
import mulCircleCharts from '@/components/mulCircleCharts.vue'
export default {
components: {
mulCircleCharts,
},
data() {
return {
MulChartData: {
data: [
{ name: "零食", value: 50 },
{ name: "饮料", value: 15 },
{ name: "烟酒", value: 23 },
{ name: "餐饮", value: 150 },
{ name: "游戏", value: 50 },
{ name: "游玩", value: 78 },
{ name: "水电", value: 50 },
{ name: "话费", value: 50 },
{ name: "出行", value: 20 },
{ name: "购物", value: 200 },
{ name: "礼物", value: 600 },
{ name: "租房", value: 805 },
{ name: "押金", value: 805 },
],
},
}
},
}
</script>
<style lang="scss" scoped>
</style>
组件内容
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
export default {
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "260px",
},
chartData: {
type: Object,
required: true,
},
},
data() {
return {
chart: null,
};
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val);
},
},
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
this.setOptions(this.chartData);
},
setOptions({
data
} = {}) {
this.chart.setOption({
grid: {
left: 0,
right: 0,
bottom: 0,
top: 50,
containLabel: true,
},
legend:(function(){
let baseSet = {
show: true,
width: 60,
height: "50%",
type: "scroll",
right: 0,
top: 'middle',
orient: "vertical",
tooltip: {
show: true
},
textStyle: {
color: '#999',
width: 50,
overflow: 'truncate',
ellipsis: '...'
}
}
return baseSet
})(),
tooltip: {
formatter: '{a}:{c}'
},
polar: {
radius: [30, '90%']
},
angleAxis: {
max: function (value) {
return value.max + 20;
},//避免柱状图成为一个圈
startAngle: 90,//从正上方开始
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
splitArea: {
show: false,
}
},
radiusAxis: {
type: 'category',
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
series: (function () {
let baseSet = {
name: '',
type: 'bar',
data: [],
coordinateSystem: 'polar',
}
let arr = []
data.forEach(item => {
baseSet.name = item.name
baseSet.data = [item.value]
arr.push(JSON.parse(JSON.stringify(baseSet)))
});
return arr
})()
});
},
},
};
</script>
总结
本文主要是使用echarts中的柱状图实现的