优化图标显示
This commit is contained in:
@@ -917,26 +917,34 @@ export default {
|
||||
},
|
||||
// 初始化成本折线图
|
||||
initCostChart(time = [], data = []) {
|
||||
// 销毁旧实例，避免重复创建
|
||||
if (this.costRef) {
|
||||
this.costRef.dispose();
|
||||
}
|
||||
this.costRef = echarts.init(this.$refs.costRef);
|
||||
|
||||
this.costRef.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
// 核心1：显示「时间 + 数量」（时间取X轴分类，数量取当前数值）
|
||||
formatter: (params) => {
|
||||
return `${params.value}`;
|
||||
// params.name 是X轴时间，params.value 是对应数值（保留2位小数，可按需调整）
|
||||
return `${params.name}<br/>${params.value.toFixed(2)}`;
|
||||
},
|
||||
// 优化提示框样式（可选）
|
||||
padding: 10,
|
||||
textStyle: { fontSize: 11 },
|
||||
backgroundColor: "#fff",
|
||||
borderColor: "#eee",
|
||||
borderWidth: 1,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: time,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
axisTick: { alignWithLabel: true },
|
||||
axisLine: { lineStyle: { color: "#999" } },
|
||||
axisLabel: {
|
||||
rotate: time.length <= 7 ? 0 : 45,
|
||||
interval: 0,
|
||||
@@ -949,29 +957,42 @@ export default {
|
||||
right: '5%',
|
||||
bottom: '8%',
|
||||
left: '8%',
|
||||
containLabel: true // 确保标签不溢出，不影响点的显示
|
||||
},
|
||||
color: "#165DFF",
|
||||
color: "#165DFF", // 折线和默认点的颜色
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#ececec",
|
||||
},
|
||||
},
|
||||
axisLine: { lineStyle: { color: "#999" } },
|
||||
splitLine: { lineStyle: { type: "dashed", color: "#ececec" } },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: data,
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
symbol: "circle", // 核心2：X轴每个数据点显示圆形标记（默认是none，不显示）
|
||||
symbolSize: 6, // 固定点的大小（默认尺寸，可调整）
|
||||
lineStyle: { width: 2 }, // 折线宽度（优化视觉）
|
||||
// 核心3：鼠标悬浮时点变大 + 黑色边框
|
||||
emphasis: {
|
||||
symbol: "circle", // 悬浮时仍为圆形
|
||||
symbolSize: 10, // 悬浮时点的大小（比默认大）
|
||||
itemStyle: {
|
||||
borderColor: "#000", // 黑色边框
|
||||
borderWidth: 2, // 边框宽度
|
||||
// 悬浮时填充色不变（仍为 #165DFF）
|
||||
color: "#165DFF"
|
||||
}
|
||||
},
|
||||
// 确保所有数据点都显示（避免自动隐藏）
|
||||
showAllSymbol: true,
|
||||
// 点的基础样式（默认状态）
|
||||
itemStyle: {
|
||||
color: "#165DFF", // 点的填充色（与折线一致）
|
||||
borderWidth: 1, // 基础状态可加细边框（可选，不加则无）
|
||||
borderColor: "#fff" // 基础状态边框颜色（与背景区分，可选）
|
||||
}
|
||||
},
|
||||
],
|
||||
});
|
||||
@@ -1051,27 +1072,50 @@ export default {
|
||||
},
|
||||
// 初始化毛利率/净利率图表
|
||||
initInterestRateChart(time, data) {
|
||||
this.initInterestRate = null;
|
||||
// 销毁旧实例，避免重复创建
|
||||
if (this.initInterestRate) {
|
||||
this.initInterestRate.dispose();
|
||||
}
|
||||
this.initInterestRate = echarts.init(this.$refs.initInterestRate);
|
||||
|
||||
// 预处理数据：将毛利率和净利率按索引对应（关键，用于手动匹配）
|
||||
const profitRateData = data.map(item => item.profitRate || 0);
|
||||
const netProfitRateData = data.map(item => item.netProfitRate || 0);
|
||||
|
||||
this.initInterestRate.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
trigger: "item", // 保留 item 模式（确保能触发，之前已验证有效）
|
||||
// 核心：手动查找当前 X 轴索引对应的另一个系列数据，拼接显示
|
||||
formatter: (params) => {
|
||||
return `${params.value}`;
|
||||
const index = params.dataIndex; // 获取当前数据的索引（X轴位置）
|
||||
const xName = time[index]; // 当前 X 轴分类名称（如时间）
|
||||
const color1 = "#165DFF"; // 毛利率颜色（与 series 一致）
|
||||
const color2 = "#14C9C9"; // 净利率颜色（与 series 一致）
|
||||
// 当前系列数据 + 另一个系列数据（按索引匹配）
|
||||
const profitRate = profitRateData[index].toFixed(2);
|
||||
const netProfitRate = netProfitRateData[index].toFixed(2);
|
||||
|
||||
// 拼接提示框内容（彩色方块 + 两个指标）
|
||||
return `
|
||||
<div style="margin-bottom:4px;">${xName}</div>
|
||||
<div><span style="display:inline-block;width:8px;height:8px;background:${color1};margin-right:6px;border-radius:2px;"></span>毛利率：${profitRate}%</div>
|
||||
<div><span style="display:inline-block;width:8px;height:8px;background:${color2};margin-right:6px;border-radius:2px;"></span>净利率：${netProfitRate}%</div>
|
||||
`;
|
||||
},
|
||||
// 保留你原有的提示框样式
|
||||
padding: 10,
|
||||
textStyle: { fontSize: 11 },
|
||||
backgroundColor: "#fff",
|
||||
borderColor: "#eee",
|
||||
borderWidth: 1,
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: time,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
axisTick: { alignWithLabel: true },
|
||||
axisLine: { lineStyle: { color: "#999" } },
|
||||
axisLabel: {
|
||||
rotate: time.length <= 7 ? 0 : 45,
|
||||
interval: 0,
|
||||
@@ -1079,21 +1123,13 @@ export default {
|
||||
},
|
||||
},
|
||||
],
|
||||
color: ["#165DFF", "#14C9C9", "#F98B26"],
|
||||
color: ["#165DFF", "#14C9C9", "#F98B26"], // 系列颜色不变
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#ececec",
|
||||
},
|
||||
},
|
||||
axisLine: { lineStyle: { color: "#999" } },
|
||||
splitLine: { lineStyle: { type: "dashed", color: "#ececec" } },
|
||||
axisLabel: { formatter: "{value}%" }, // Y轴加百分号
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
@@ -1106,23 +1142,17 @@ export default {
|
||||
{
|
||||
name: "毛利率",
|
||||
type: "bar",
|
||||
barGap: '0%',
|
||||
barGap: "0%", // 保持柱子紧贴
|
||||
barWidth: time.length <= 7 ? "50%" : "30%",
|
||||
data: data.map((item) => item.profitRate),
|
||||
data: profitRateData, // 预处理后的毛利率数据
|
||||
},
|
||||
{
|
||||
name: '净利率',
|
||||
type: "bar",
|
||||
barGap: '0%',
|
||||
barGap: "0%",
|
||||
barWidth: time.length <= 7 ? "50%" : "30%",
|
||||
data: data.map(item => item.netProfitRate),
|
||||
data: netProfitRateData, // 预处理后的净利率数据
|
||||
},
|
||||
// {
|
||||
// name: '优惠金额',
|
||||
// type: "bar",
|
||||
// barWidth: time.length <= 7 ? "30%" : "20%",
|
||||
// data: data.map(item => item.discountAmount),
|
||||
// }
|
||||
],
|
||||
});
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user