143 lines
3.8 KiB
Vue
143 lines
3.8 KiB
Vue
<template>
|
|
<div :class="className" :style="{ height: height, width: width }" />
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
require('echarts/theme/macarons'); // echarts theme
|
|
import resize from './mixins/resize';
|
|
|
|
export default {
|
|
mixins: [resize],
|
|
props: {
|
|
className: {
|
|
type: String,
|
|
default: 'chart',
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%',
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '800px',
|
|
},
|
|
projectList: {
|
|
type: Array,
|
|
required: true,
|
|
default: [
|
|
{ projectName: 'Project A', laborCost: 1500, color: '#7cb5ec' },
|
|
{ projectName: 'Project B', laborCost: 800, color: '#434348' },
|
|
{ projectName: 'Project C', laborCost: 1200, color: '#90ed7d' },
|
|
{ projectName: 'Project D', laborCost: 1800, color: '#f7a35c' },
|
|
{ projectName: 'Project E', laborCost: 600, color: '#8085e9' },
|
|
]
|
|
}, // 新增prop
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
colors: [], // 用于存储柱子颜色
|
|
laborCosts: [], // 用于存储人工成本数据
|
|
projectNames: [], // 用于存储项目名称
|
|
};
|
|
},
|
|
watch: {
|
|
projectList: {
|
|
handler(newVal) {
|
|
this.updateData(newVal);
|
|
if (this.chart) { // 确保图表已经初始化
|
|
this.setOption();
|
|
}
|
|
},
|
|
deep: true,
|
|
immediate: true,
|
|
},
|
|
},
|
|
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.updateData(this.projectList); // 初始化时更新数据
|
|
this.setOption(); // 设置图表选项
|
|
},
|
|
updateData(projectList) {
|
|
this.colors = projectList.map((item) => item.color);
|
|
this.laborCosts = projectList.map((item) => item.laborCost);
|
|
this.projectNames = projectList.map((item) => item.projectName.replace(/(.{5})/g, '$1\n')); // 保持换行格式
|
|
},
|
|
setOption() {
|
|
this.chart.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
formatter: (params) => { // 自定义 tooltip 格式
|
|
let { dataIndex } = params[0]; // 获取鼠标悬停的索引
|
|
let projectName = this.projectNames[dataIndex]; // 获取对应的项目名称
|
|
let laborCost = this.laborCosts[dataIndex]; // 获取对应的人工成本
|
|
return `${projectName}<br/>人工成本: ${laborCost} 人天`; // 显示项目名称和人工成本
|
|
},
|
|
},
|
|
grid: {
|
|
top: 10,
|
|
left: '2%',
|
|
right: '8%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
max: 'dataMax',
|
|
name: '人天',
|
|
nameLocation: 'middle',
|
|
nameGap: 25,
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: this.projectNames,
|
|
inverse: true,
|
|
axisLabel: {
|
|
rotate: 45, // 设置标签旋转角度
|
|
interval: 0, // 强制显示所有标签
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
realtimeSort: true,
|
|
type: 'bar',
|
|
data: this.laborCosts,
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
valueAnimation: true,
|
|
},
|
|
itemStyle: {
|
|
color: (params) => this.colors[params.dataIndex], // 应用颜色
|
|
},
|
|
},
|
|
],
|
|
legend: {
|
|
show: true,
|
|
},
|
|
animationDuration: 6000,
|
|
animationDurationUpdate: 3000,
|
|
animationEasing: 'linear',
|
|
animationEasingUpdate: 'linear',
|
|
});
|
|
},
|
|
},
|
|
|
|
};
|
|
</script>
|