131 lines
3.5 KiB
Vue
131 lines
3.5 KiB
Vue
<template>
|
||
<div>
|
||
<div ref="chart" class="chart-container"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import echarts from "echarts";
|
||
import { currentGET } from "api/modules";
|
||
export default {
|
||
data() {
|
||
return {
|
||
showPercentage: true, // 默认显示数量
|
||
chartData:[
|
||
[
|
||
{ modelName: '冷藏', total: 190 },
|
||
{ modelName: '普货', total: 40 }
|
||
// { name: '海格：20%', value: 160 },
|
||
// { name: '宇通：20%', value: 260 },
|
||
// { name: '其它：10%', value: 260 }
|
||
]
|
||
],
|
||
colors: ["#1890ff", "#ff9800"]
|
||
//colors: ["#00E5FF", "#FF5733", "#FFBF00", "#5CDB95"]
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
getData() {
|
||
currentGET("big5").then((res) => {
|
||
if(res.code == 0){ // 确保接口返回的code正确
|
||
// 转换数据结构为饼图需要的格式
|
||
this.chartData = [res.data.map(item => ({
|
||
name: item.modelName,
|
||
value: item.total
|
||
}))];
|
||
this.initChart();
|
||
}
|
||
});
|
||
},
|
||
|
||
initChart() {
|
||
const myChart = echarts.init(this.$refs.chart); // 修复变量名不一致问题
|
||
let option = {
|
||
title: {
|
||
text: '',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#000000', // 浅色主题使用黑色
|
||
fontWeight: 'normal',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
series: this.chartData.map(function (data, idx) {
|
||
var top = idx * 33.3;
|
||
return {
|
||
type: 'pie',
|
||
radius: [50, 90],
|
||
top: top + '%',
|
||
height: '33.33%',
|
||
left: 'center',
|
||
width: '600px',
|
||
itemStyle: {
|
||
borderColor: '#ff9800', // 使用较暗的橙色边框
|
||
borderWidth: 1
|
||
},
|
||
label: {
|
||
alignTo: 'edge',
|
||
formatter: ({ name, value, percent }) =>
|
||
`{name|${name}}\n{value|${value}辆} {percent|${percent}%}`,
|
||
minMargin: 5,
|
||
edgeDistance: 10,
|
||
lineHeight: 20,
|
||
rich: {
|
||
name: { // 新增 name 样式
|
||
fontSize: 14,
|
||
color: '#666666', // 使用深灰色降低亮度
|
||
padding: [0, 0, 5, 0]
|
||
},
|
||
value: {
|
||
fontSize: 12,
|
||
color: '#ff9800', // 使用较暗的橙色
|
||
padding: [0, 5, 0, 0]
|
||
},
|
||
percent: {
|
||
fontSize: 12,
|
||
color: '#f57c00' // 使用更深的橙色
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
length: 40,
|
||
length2: 15,
|
||
maxSurfaceAngle: 80
|
||
},
|
||
labelLayout: function (params) {
|
||
const isLeft = params.labelRect.x < myChart.getWidth() / 2;
|
||
const points = params.labelLinePoints;
|
||
// Update the end point.
|
||
points[2][0] = isLeft
|
||
? params.labelRect.x
|
||
: params.labelRect.x + params.labelRect.width;
|
||
return {
|
||
labelLinePoints: points
|
||
};
|
||
},
|
||
data: data
|
||
};
|
||
})
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
this.chart = myChart;
|
||
},
|
||
toggleMode() {
|
||
this.showPercentage = !this.showPercentage;
|
||
this.initChart(); // 重新渲染图表
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 800px;
|
||
}
|
||
</style>
|