You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
<template>
|
|
<div :id="echartsId" style="width: 100%;height: 350px" v-loading="loading"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
|
|
export default {
|
|
name: "carTypePie",
|
|
data() {
|
|
return {
|
|
echartsId: '',
|
|
loading:false
|
|
}
|
|
},
|
|
props: ['echartsId'],
|
|
methods: {
|
|
initOption(data) {
|
|
let myChart = this.$echarts.init(document.getElementById(this.echartsId))
|
|
// 绘制图表
|
|
this.option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left'
|
|
},
|
|
series: [
|
|
{
|
|
name: '车型占比',
|
|
type: 'pie',
|
|
right: "-20%",
|
|
avoidLabelOverlap: true, // 是否启用防止标签重叠策略
|
|
radius: ['40%', '70%'],
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter:'{b}({c})',
|
|
// position: 'center'
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
// fontSize: 40,
|
|
// fontWeight: 'bold'
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: true
|
|
},
|
|
data: data
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(this.option);
|
|
},
|
|
initEcharts(echartsData) {
|
|
var data = [];
|
|
if (echartsData != null && echartsData.length > 0) {
|
|
for (var i=0;i<echartsData.length;i++) {
|
|
let item = echartsData[i];
|
|
data.push({
|
|
value: item.CARCOUNT,
|
|
name: item.TEXT
|
|
})
|
|
}
|
|
}else{
|
|
data.push({
|
|
value: 0,
|
|
name: '无数据'
|
|
})
|
|
}
|
|
this.echartsId = this.$props.echartsId
|
|
this.initOption(data)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |