实线虚线连接图例：
js逻辑实现如下-解决相同数据仅出现两个情况优化线条==============================
mock数据：
this.sylist = [
{
ljsy: '100.00',
mrje: '100000.00',
rq: '20200629',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '200.00',
mrje: '100000.00',
rq: '20200630',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '300.00',
mrje: '100000.00',
rq: '20200701',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '400.00',
mrje: '100000.00',
rq: '20200702',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '400.00',
mrje: '100000.00',
rq: '20200703',
sy: '0.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '600.00',
mrje: '100000.00',
rq: '20200706',
sy: '200.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '700.00',
mrje: '100000.00',
rq: '20200707',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '800.00',
mrje: '100000.00',
rq: '20200708',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '1500.00',
mrje: '100000.00',
rq: '20200709',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1500.00',
mrje: '100000.00',
rq: '20200710',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1500.00',
mrje: '100000.00',
rq: '20200713',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1500.00',
mrje: '100000.00',
rq: '20200714',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1500.00',
mrje: '100000.00',
rq: '20200715',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1500.00',
mrje: '100000.00',
rq: '20200716',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1500.00',
mrje: '100000.00',
rq: '20200717',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1500.00',
mrje: '100000.00',
rq: '20200720',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '100.00',
mrje: '100000.00',
rq: '20200721',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '200.00',
mrje: '100000.00',
rq: '20200722',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '300.00',
mrje: '100000.00',
rq: '20200723',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '400.00',
mrje: '100000.00',
rq: '20200724',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '400.00',
mrje: '100000.00',
rq: '20200727',
sy: '0.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '600.00',
mrje: '100000.00',
rq: '20200728',
sy: '200.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '700.00',
mrje: '100000.00',
rq: '20200729',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '800.00',
mrje: '100000.00',
rq: '20200730',
sy: '100.00',
ygFlag: '1',
ztFlag: '0',
},
{
ljsy: '1300.00',
mrje: '100000.00',
rq: '20200801',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1300.00',
mrje: '100000.00',
rq: '202000804',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1300.00',
mrje: '100000.00',
rq: '20200805',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1500.00',
mrje: '100000.00',
rq: '20200806',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1300.00',
mrje: '100000.00',
rq: '20200807',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1300.00',
mrje: '100000.00',
rq: '20200808',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1400.00',
mrje: '100000.00',
rq: '20200811',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
{
ljsy: '1500.00',
mrje: '100000.00',
rq: '20200812',
sy: '0.00',
ygFlag: '1',
ztFlag: '1',
},
]
调用方式-计算熟悉option：
computed: {
lineOpt() {
const { xAxis, yAxis, sylist } = this;
const {option} = getLineEchartsData({
sylist,
xAxis,
yAxis,
});
return option;
},
}
/**
*日期数据过滤
*list---sylist
*xAxis: X轴
*yAxis: y轴
*/
fmtLjsyList(list) {
const xAxis = [];
let yAxis = [];
if (list && list.length) {
list.forEach((item) => {
xAxis.push(item.rq);
yAxis.push(item.ljsy)
});
} else {
yAxis = [0, 1];
}
this.xAxis = xAxis;
this.yAxis = yAxis;
}
/**echarts-option处理公告方法
*sylist传入原数据
*xAxis: X轴
*yAxis: y轴
*/
export default function getLineEcharts({sylist, xAxis, yAxis}) {
const setxAxisAlign = (data) => {
let xData = [];
if (data.length) {
data.forEach((value, index) => {
let align = 'center'
if (index === 0) align = 'left'
else if (index===data.length -1) align = 'right'
xData.push({
value,
textStyle: {
align,
}
})
});
}
return xData;
};
const getyAxisData = (data) => {
if (!sylist.length) {
return {min: 0, max: 1, interval: 0.2};
} // 空数据
const yMin = Math.min.apply(null, data);
const yMax = Math.max.apply(null, data);
const min = yMin && Math.floor(yMin);
const max = yMax && Math.floor(yMax);
return { min, max, interval: (max - min) / 4};
};
const getLjsyData = (data) => {
let seriesData = [];
if (data.length) {
data.forEach((item) => {
seriesData.push(item.ljsy);
});
}
return seriesData;
};
const getHasNullData = () => {
const array = getLjsyData(sylist);
for (let i = 1; i < array.length; i++) {
if (array[i] !== null) {
for (let m = i + 1; m < array.length; m++) {
if (array[i] === array[m]) {
// array[i] = null;
array[m] = null;
}
}
}
}
return array;
};
const { min, max, interval} = getyAxisData(yAxis);
const arr = getHasNullData();
const solidSeriesData = []
const dashedSeriesData = []
const dashedSolidData = []
const trueTempData = []
arr.forEach((items) => {
solidSeriesData.push({value: items});
if (items) trueTempData.push(items);
});
console.log('arr有空数据：', arr);
const tempNullLength = arr.length - trueTempData.length;
if (!!tempNullLength && tempNullLength !== arr.length) {
const dataForSeries2 = [];
arr.forEach((items, index) => {
const obj = {};
obj.index = index;
obj.value = items;
const preTempType = arr[index - 1] === null;
const nextTempType = arr[index + 1] === null;
if (items === null) {
obj.isReal = false;
obj.isNull = false;
obj.isContinuous = true;
} else {
obj.isReal = true;
if (preTempType || nextTempType) {
obj.isNull = false;
} else {
obj.isNull = true;
}
obj.isContinuous = false;
}
dataForSeries2.push(obj);
});
console.log('dataForSeries2', dataForSeries2);
let dashedValue
for (let i = 0; i < dataForSeries2.length;) {
const {isReal, isNull, isContinuous, value } = dataForSeries2[i];
dashedSolidData[i] = null
if (isNull) {
dashedValue = null
i++;
continue;
}
if (isReal) {
// 虚线开头
if (dataForSeries2[i+1] && dataForSeries2[i+1].isContinuous){
dashedSeriesData[i] = value;
} else {
// 虚线-实线连接处特殊处理
dashedSolidData[i - 1] = { value: dashedValue }
dashedSolidData[i] = { value }
}
dashedValue = null
i++;
continue;
}
if (isContinuous) {
dashedValue = dashedValue || dataForSeries2[i-1].value
dashedSeriesData[i] = dashedValue
i++
} else {
dashedValue = null
// 不连续
i++;
}
}
console.log('solidSeriesData', solidSeriesData);
console.log('dashedSeriesData', dashedSeriesData);
};
console.log('------log------', dashedSeriesData)
const option = {
animation: false,
grid: {
top: 15,
left: 0,
right: 16,
bottom: 30,
},
tooltip:{
trigger: 'axis'
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#eeeeee',
},
},
axisLabel: {
color: '#333333',
fontSize: 12,
showMinLabel: true,
showMaxLabel: true,
formatter: (value, index) => {
let val = '';
if (index === 0 || index === xAxis.length -1) {
val = value.toString();
if (val) {
val = `${val.substring(0, 4)}-${val.substring(4, 6)}-${val.substring(6, 8)}`
}
}
return val;
}
},
axisTick: {
show: false,
},
data: setxAxisAlign(xAxis),
},
],
yAxis: {
type: 'value',
min,
max,
interval,
axisLabel: {
margin: -4,
padding: [-14, 0, 0, 0],
verticalAlign: 'bottom',
align: 'left',
color: '#666666',
fontSize: 12,
formatter(value, index) {
if (!sylist.length) {
let val = 0;
val = index === 0 ? 0 : '';
return val;
}
return value.toFixed(2);
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
width: 1,
color: '#eeeeee',
},
},
},
series: [
{
type: 'line',
showSymbol: false,
lineStyle: {
width: 1,
color: '#E12121',
},
data: solidSeriesData,
},
{
type: 'line',
smooth: false,
showSymbol: false,
symbolSize: 1,
symbol: 'triangle',
lineStyle: {
type: 'dashed',
width: 1,
color: '#020',
},
data: dashedSeriesData,
},
{
type: 'line',
smooth: false,
showSymbol: false,
symbolSize: 1,
symbol: 'triangle',
lineStyle: {
width: 1,
color: '#E12121',
},
data: dashedSolidData
}
],
}
return { option }
}
```js
