npm i echarts ---save-dev
main.js
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
chart
<template>
<div class="chart">
</div>
</template>
<script>
export default {
data() {
return {
color: ["#4DB628", "#1CDE8E", "#3CE7F2", "#2E81FF", "#8B3BF8", "#D03B7A", "#FF8523", "#F4C60D"],
data:[{
value: 335,
name: '别墅类房地产'
},
{
value: 310,
name: '具有别墅风格的经营性项目'
},
{
value: 234,
name: '私家庄园'
},
{
value: 135,
name: '私人别墅'
}
],
total: 0,
myChart: {}
}
},
mounted() {
let _this = this;
_this.init()
setTimeout(() => {
_this.myChart.resize()
}, 1000)
window.addEventListener("resize", function() {
_this.myChart.resize()
})
},
methods: {
init() {
this.data = this.pieData
for (var i = 0; i < this.data.length; i++) {
this.total += this.data[i].value
}
this.drawLine();
},
drawLine() {
this.myChart = this.$echarts.init(this.$el)
let self = this
this.myChart.clear()
// 绘制图表
this.myChart.setOption({
backgroundColor: "#fff",
title: {
text: '总数',
subtext: self.total,
textStyle: {
color: '#333',
fontSize: 14,
align: 'center'
},
subtextStyle: {
fontSize: 24,
color: '#333',
fontWeight: 'bold',
},
x: 'center',
y: '44%',
},
tooltip: {
trigger: 'item',
formatter: "{b} : {c}"
},
legend: {
show: false
},
color: self.color,
series: [{
name: '访问来源',
type: 'pie',
radius: ['35%', '45%'],
center: ['50%', '50%'],
data: self.data,
label: {
normal: {
show: true,
formatter: "{b} \n {num|{c}}",
fontSize: 14,
rich: {
num: {
lineHeight: 24,
fontSize: 14,
align: 'center'
}
}
},
emphasis: {
show: true
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
borderColor: 'rgba(255, 255, 255, 1)',
borderWidth: 0,
},
}
},
{
name: '外边框',
type: 'pie',
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['47%', '47.6%'],
label: {
normal: {
show: false
}
},
data: self.data,
},
]
});
}
},
}
</script>
<style lang="scss" scoped>
</style>
来源:https://blog.csdn.net/weixin_42670357/article/details/99641131