以折线图为例
问题：
解决：
在echart文档中发现有labelLayout配置 能够获取每一个值坐标点
因为他们每一列x轴坐标都是一样的 所以我们直接去获取他的y轴 创建数组
data() {
return {
xObj: {},
};
},
mounted() {
// 创建x轴数量的长度 arr就是你series的data值
arr.forEach((i, index) => {
this.xObj[index] = [];
});
},
在写一个判断近似值的函数(核心代码)
modifyArray(arr) {
const n = 10 // 坐标小于n就加n 视情况修改
let modified;
do {
modified = false;
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (Math.abs(arr[i] - arr[j]) < n) {
arr[j] += n;
modified = true;
}
}
}
} while (modified);// 每次都重新检查 不然修改后可能还会有近似
return arr;
},
在labelLayout配置中一个一个存起来 然后判断
labelLayout({ rect, dataIndex }) {
// 相同的x坐标存一起
that.xObj[dataIndex].push(rect.y);
that.xObj[dataIndex] = that.modifyArray(that.xObj[dataIndex]);//和前面判断是否有近似值 修改后者
const len = that.xObj[dataIndex].length;
that.$forceUpdate();// 刷新dom
return {
y: that.xObj[dataIndex][len - 1], //取修改后最新的值
};
},
完整代码
<template>
<div>{{xObj}}
<div id="main"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
xObj: {},
};
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
// 判断轴
modifyArray(arr) {
let modified;
do {
modified = false;
for (let i = 0; i < arr.length; i++) {
for (let j = i + 1; j < arr.length; j++) {
if (Math.abs(arr[i] - arr[j]) < 10) {
// 坐标小于10就 +10
arr[j] += 10;
modified = true;
}
}
}
} while (modified);// 每次都重新检查 不然修改后可能还会有近似
return arr;
},
init() {
const that = this;
var myChart = echarts.init(document.getElementById("main"));
const arr11 = [1174, 1060, 1053, 1096, 1053, 1096];
const arr22 = [1264, 1050, 1053, 1096, 1053, 1096];
const arr33 = [1364, 1040, 1053, 1096, 1053, 1096];
const arr44 = [1464, 1030, 1053, 1096, 1053, 1096];
// 创建x轴数量的长度
arr11.forEach((i, index) => {
that.xObj[index] = [];
});
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
show: true,
position: "bottom",
nameLocation: "center",
nameTextStyle: {
fontSize: 12,
color: "#333",
fontStyle: "normal",
fontWeight: "normal",
padding: [14, 0, 0, 0],
},
axisLine: {
show: true,
lineStyle: { width: 1, color: "#f5f6f9", type: "solid" },
},
splitLine: {
show: true,
lineStyle: { width: 1, color: "#f5f6f9", type: "dashed" },
},
axisLabel: {
show: true,
fontStyle: "normal",
fontWeight: "normal",
color: "#1e1e1e",
},
axisTick: {
show: false,
lineStyle: { width: 1, color: "#333" },
alignWithLabel: true,
},
name: "",
},
yAxis: [
{
type: "value",
show: true,
position: "bottom",
nameLocation: "end",
alignTicks: true,
nameTextStyle: {
fontSize: 12,
color: "#86909c",
fontStyle: "normal",
fontWeight: "normal",
padding: [0, 0, 1, 0],
},
axisLine: {
show: true,
lineStyle: { width: 1, color: "#f2f2f2", type: "solid" },
},
splitLine: {
show: true,
lineStyle: { width: 1, color: "#f2f2f2", type: "dashed" },
},
axisLabel: {
show: true,
fontStyle: "normal",
fontWeight: "normal",
color: "#86909c",
formatter: "{value}%",
},
axisTick: {
show: false,
lineStyle: { width: 1, color: "#333" },
alignWithLabel: true,
},
name: "百分比(%)",
unit: "",
formatter: "",
},
{
show: true,
name: "百分比(%)",
position: "bottom",
nameLocation: "end",
alignTicks: true,
nameTextStyle: {
fontSize: 12,
color: "#86909c",
fontStyle: "normal",
fontWeight: "normal",
padding: [0, 0, 1, 0],
},
axisLine: {
show: true,
lineStyle: { width: 1, color: "#f2f2f2", type: "solid" },
},
splitLine: {
show: true,
lineStyle: { width: 1, color: "#f2f2f2", type: "dashed" },
},
axisLabel: {
show: true,
fontStyle: "normal",
fontWeight: "normal",
color: "#86909c",
formatter: "{value}%",
},
axisTick: {
show: false,
lineStyle: { width: 1, color: "#333" },
alignWithLabel: true,
},
},
],
labelLayout({ rect, dataIndex }) {
// 相同的x坐标存一起
that.xObj[dataIndex].push(rect.y);
that.xObj[dataIndex] = that.modifyArray(that.xObj[dataIndex]);//和前面判断是否有近似值 修改后者
const len = that.xObj[dataIndex].length;
that.$forceUpdate();
return {
y: that.xObj[dataIndex][len - 1] -10, //取修改后最新的值
};
},
series: [
{
type: "line",
name: "目标",
smooth: false,
symbol: "circle",
symbolSize: 4,
label: {
show: true,
fontSize: 12,
position: "top",
color: "#333",
fontStyle: "normal",
fontWeight: "normal",
},
lineStyle: { width: 2, type: "solid", color: "#fbd437" },
itemStyle: { width: 2, type: "solid", color: "#fbd437" },
areaStyle: { color: "#ffffff00", opacity: 1 },
yAxisIndex: 0,
showBackground: false,
backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
data: arr11,
id: "f0000202",
nameCopy: "目标收缴率",
},
{
type: "line",
name: "实际",
smooth: false,
symbol: "circle",
symbolSize: 4,
label: {
show: true,
fontSize: 12,
position: "top",
color: "#333",
fontStyle: "normal",
fontWeight: "normal",
},
lineStyle: { width: 2, type: "solid", color: "#ff5252" },
itemStyle: { width: 2, type: "solid", color: "#ff5252" },
areaStyle: { color: "#ffffff00", opacity: 1 },
yAxisIndex: 0,
showBackground: false,
backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
data: arr22,
id: "f0000205",
nameCopy: "当期累计收缴率",
},
{
type: "line",
name: "同期",
smooth: false,
symbol: "circle",
symbolSize: 4,
label: {
show: true,
fontSize: 12,
position: "bottom",
color: "#333",
fontStyle: "normal",
fontWeight: "normal",
},
lineStyle: { width: 2, type: "solid", color: "#5297ff" },
itemStyle: { width: 2, type: "solid", color: "#5297ff" },
areaStyle: { color: "#ffffff00", opacity: 1 },
yAxisIndex: 0,
showBackground: false,
backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
data: arr33,
id: "f0000208",
nameCopy: "同期收缴率",
},
{
type: "line",
name: "达成率",
smooth: false,
symbol: "circle",
symbolSize: 4,
label: {
show: true,
fontSize: 12,
position: "top",
color: "#333",
fontStyle: "normal",
fontWeight: "normal",
},
lineStyle: { width: 2, type: "solid", color: "#0ccb7c" },
itemStyle: { width: 2, type: "solid", color: "#0ccb7c" },
areaStyle: { color: "#ffffff00", opacity: 1 },
yAxisIndex: 1,
showBackground: false,
backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
data: arr44,
id: "f0000201",
nameCopy: "达成率",
},
],
grid: { top: "15%", right: "10%", bottom: "20%", left: "10%" },
tooltip: {
show: true,
backgroundColor: "#eafeff",
trigger: "axis",
textStyle: {
color: "#1d2129",
fontStyle: "normal",
fontWeight: "normal",
fontSize: 14,
},
},
legend: {
show: true,
left: "center",
top: "bottom",
textStyle: {
color: "#333",
fontStyle: "normal",
fontWeight: "normal",
fontSize: "10px",
},
icon: "circle",
itemWidth: 11,
itemHeight: 11,
},
};
myChart.setOption(option);
},
},
};
</script>
<style>
#main {
width: 100vw;
height: 100vh;
}
</style>
其实也有很多解决方法 比如加tooltip或者offset等等 但为了能够直观看到数据设计要求的 就只能这么做了
