|
|
const TotalCost = (echarts: any) => {
|
|
|
// 实例化对象
|
|
|
const myChart = echarts.init(document.getElementById("totalCost"));
|
|
|
// 配置项
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
// 默认为直线，可选为：'line' | 'shadow'
|
|
|
type: "shadow"
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
icon: "circle",
|
|
|
top: "5%",
|
|
|
right: "2%",
|
|
|
itemGap: 20,
|
|
|
textStyle: {
|
|
|
fontSize: 12,//字体大小
|
|
|
color: "#787E95"//字体颜色
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
top: "20%",
|
|
|
left: "2%",
|
|
|
right: "2%",
|
|
|
bottom: "3%",
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
|
|
axisTick: {
|
|
|
alignWithLabel: true,
|
|
|
show: false
|
|
|
},
|
|
|
// 修改坐标值样式
|
|
|
axisLabel: {
|
|
|
color: "#B8B8B8",
|
|
|
fontSize: 16,
|
|
|
show: true
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
name: "万元",
|
|
|
// 修改坐标值样式
|
|
|
axisLabel: {
|
|
|
color: "#787E95",
|
|
|
fontSize: 14
|
|
|
// formatter: '{value} 人'
|
|
|
},
|
|
|
nameTextStyle: {
|
|
|
color: "#787E95",
|
|
|
fontSize: 16
|
|
|
},
|
|
|
// 修改坐标轴线样式
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "transparent"
|
|
|
}
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false // 不显示坐标轴刻度线
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
type: "dashed",
|
|
|
color: "rgba(93,126,158,1)"
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "人工成本",
|
|
|
type: "bar",
|
|
|
showBackground: false,
|
|
|
barWidth: "20%",
|
|
|
data: [200, 120, 230, 225, 165, 135, 165, 120, 210, 120, 85, 210],
|
|
|
// bar 样式修改
|
|
|
itemStyle: {
|
|
|
color: "#4CAEFF"
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
name: "人工成本",
|
|
|
type: "line",
|
|
|
yAxisIndex: 0,
|
|
|
data: [190, 145, 250, 225, 165, 140, 170, 130, 215, 120, 85, 210],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#64C3FF",
|
|
|
lineStyle: {
|
|
|
color: "#64C3FF"
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
areaStyle: {
|
|
|
normal: {
|
|
|
color: {//分隔区域的颜色
|
|
|
x0: 0,
|
|
|
y0: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [{
|
|
|
offset: 0,
|
|
|
color: "#64C3FF" // 0% 处的颜色
|
|
|
}, {
|
|
|
offset: 1,
|
|
|
color: "rgba(100,195,255,0)" // 100% 处的颜色；中间还可以设置50%、20%、70%时的颜色
|
|
|
}],
|
|
|
globalCoord: false // 缺省为 false，以确保上面的x,y,x2,y2表示的是百分比
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
// 配置项给实例对象
|
|
|
myChart.setOption(option);
|
|
|
return myChart;
|
|
|
};
|
|
|
|
|
|
export default TotalCost;
|
