自定义line元素覆盖折线图的color设定echarts 折线配置项内容和展示
自定义系列中的line元素设定了stroke颜色后覆盖了折线图的color设定
配置项如下
var fmtData = [
[0, 0],
[0, "0.10"],
[0.01, "0.20"],
[0, "0.30"],
[0, "0.40"],
[0, "0.50"],
[0, "0.60"],
[0, "0.70"],
[0, "0.80"],
[0, "0.90"],
[0, "1.00"],
[0, "1.10"],
[0.01, "1.20"],
[0.25, "1.30"],
[0.17, "1.40"],
[0.18, "1.50"],
[0.71, "1.60"],
[0.75, "1.70"],
[1.24, "1.80"],
[0.8, "1.90"],
[0.62, "2.00"],
[0.66, "2.10"],
[0.63, "2.20"],
[0.84, "2.30"],
[0.82, "2.40"],
[0.68, "2.50"],
[0.51, "2.60"],
[0.56, "2.70"],
[0.29, "2.80"],
[1.39, "2.90"],
[0.54, "3.00"],
[0.42, "3.10"],
[0.41, "3.20"],
[0.29, "3.30"],
[0.2, "3.40"],
[0.11, "3.50"],
[0.14, "3.60"],
[0.22, "3.70"],
[1.38, "3.80"],
[0.57, "3.90"],
[0.54, "4.00"],
[0.65, "4.10"],
[0.65, "4.20"],
[0.64, "4.30"],
[0.84, "4.40"],
[0.89, "4.50"],
[0.81, "4.60"],
[0.76, "4.70"],
[0.79, "4.80"],
[1.23, "4.90"],
[1.42, "5.00"],
[1.45, "5.10"],
[1.34, "5.20"],
[1.2, "5.30"],
[1.15, "5.40"],
[0.99, "5.50"],
[0.91, "5.60"],
[0.64, "5.70"],
[0.59, "5.80"],
[0.61, "5.90"],
[0.63, "6.00"],
[0.6, "6.10"],
[0.69, "6.20"],
[0.8, "6.30"],
[0.94, "6.40"],
[1.08, "6.50"],
[1.28, "6.60"],
[1.31, "6.70"],
[1.11, "6.80"],
[1.11, "6.90"],
[1.12, "7.00"],
[1.12, "7.10"],
[1.07, "7.20"],
[1.21, "7.30"],
[1.32, "7.40"],
[1.47, "7.50"],
[1.6, "7.60"],
[1.74, "7.70"],
[2.13, "7.80"],
[2.27, "7.90"],
[1.86, "8.00"],
[1.07, "8.10"],
[1.13, "8.20"],
[1.74, "8.30"],
[1.92, "8.40"],
[2.12, "8.50"],
[2.35, "8.60"],
[3.31, "8.70"],
[3.38, "8.80"],
[3.46, "8.90"],
[3.57, "9.00"],
[3.07, "9.10"],
[3.27, "9.20"],
[3.53, "9.30"],
[3.75, "9.40"],
[3.73, "9.50"],
[3.49, "9.60"],
[3.59, "9.70"],
[4.34, "9.80"],
[4.04, "9.90"],
[4.06, "10.00"],
[4.11, "10.10"],
[4.08, "10.20"],
[4.38, "10.30"],
[4.28, "10.40"],
[3.95, "10.50"],
[3.9, "10.60"],
[3.84, "10.70"],
[3.98, "10.80"],
[4.01, "10.90"],
[4.08, "11.00"],
[4.28, "11.10"],
[4.38, "11.20"],
[4.1, "11.30"],
[4.6, "11.40"],
[4.74, "11.50"],
[4.48, "11.60"],
[5.08, "11.70"],
[5.16, "11.80"],
[4.88, "11.90"],
[4.79, "12.00"],
[5.17, "12.10"],
[5.07, "12.20"],
[5.44, "12.30"],
[5.43, "12.40"],
[5.48, "12.50"],
[5.66, "12.60"],
[5.61, "12.70"],
[5.53, "12.80"],
[5.68, "12.90"],
[5.55, "13.00"],
[5.32, "13.10"],
[5.35, "13.20"],
[5.46, "13.30"],
[5.61, "13.40"],
[5.39, "13.50"],
[5.52, "13.60"],
[5.21, "13.70"],
[5.51, "13.80"],
[5.69, "13.90"],
[5.21, "14.00"],
[4.88, "14.10"],
[5.44, "14.20"],
[5.41, "14.30"],
[5.65, "14.40"],
[5.41, "14.50"],
[4.98, "14.60"],
[4.82, "14.70"],
[4.26, "14.80"],
[3.73, "14.90"],
[4.72, "15.00"],
[5.21, "15.10"],
[3.51, "15.20"],
[3.04, "15.30"],
[3.08, "15.40"],
[3.33, "15.50"],
[3.45, "15.60"],
[3.22, "15.70"],
[3.63, "15.80"],
[3.47, "15.90"],
[2.87, "16.00"],
[2.54, "16.10"],
[2.76, "16.20"],
[2.65, "16.30"],
[2.57, "16.40"],
[2.6, "16.50"],
[2.67, "16.60"],
[2.47, "16.70"],
[4.58, "16.80"],
[5.51, "16.90"],
[3.82, "17.00"],
[2.12, "17.10"],
[1.76, "17.20"],
[2.57, "17.30"],
[2.73, "17.40"],
[2.94, "17.50"],
[2.8, "17.60"],
[2.19, "17.70"],
[1.38, "17.80"],
[1.16, "17.90"],
[1.14, "18.00"],
[1.22, "18.10"],
[0.98, "18.20"],
[0.99, "18.30"],
[0.99, "18.40"],
[1.01, "18.50"],
[0.99, "18.60"],
[1.01, "18.70"],
[0.92, "18.80"],
[0.97, "18.90"],
[0.97, "19.00"],
[0.89, "19.10"],
[0.91, "19.20"],
[1.79, "19.30"],
[1.78, "19.40"],
[1.33, "19.50"],
[0.91, "19.60"],
[1.73, "19.70"],
[1.42, "19.80"],
[1.27, "19.90"],
[1.62, "20.00"],
[1.17, "20.10"],
[0.93, "20.20"],
[0.93, "20.30"],
[0.89, "20.40"],
[1.01, "20.50"],
[1.16, "20.60"],
[0.94, "20.70"],
[0.88, "20.80"],
[0.88, "20.90"],
[0.91, "21.00"],
[0.89, "21.10"],
[3.7, "21.20"],
[6.05, "21.30"],
[10.6, "21.40"],
[5.61, "21.50"],
[4.34, "21.60"],
[4.1, "21.70"],
[2.79, "21.80"],
[3.83, "21.90"],
[5.94, "22.00"],
[5.13, "22.10"],
[6.99, "22.20"],
[5.23, "22.30"],
[2.62, "22.40"],
[2.88, "22.50"],
[1.87, "22.60"],
[5.47, "22.70"],
[7.6, "22.80"],
[5.72, "22.90"],
[8.66, "23.00"],
[7.32, "23.10"],
[7.01, "23.20"],
[8.25, "23.30"],
[8.57, "23.40"],
[4.07, "23.50"],
[12.26, "23.60"],
[6.5, "23.70"],
[3.65, "23.80"],
[1.85, "23.90"],
[1.42, "24.00"],
[1.12, "24.10"],
[1.2, "24.20"],
[1.81, "24.30"],
[1.83, "24.40"],
[2.04, "24.50"],
[4.06, "24.60"],
[17.76, "24.70"]
]
option = {
grid: {
top: 40,
left: 'center',
bottom: 40,
width: 400
},
xAxis: {
name: 'ps(kPa)',
type: 'value',
position: 'top',
splitLine: {
show: false
},
axisTick: {
length: 2
}
},
yAxis: {
name: '深度(m)',
type: 'value',
inverse: true,
minInterval: 0.1,
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisTick: {
length: 2
}
},
dataZoom: [{
type: 'inside',
yAxisIndex: [0],
filterMode: 'weakFilter'
},
{
type: 'slider',
yAxisIndex: [0],
filterMode: 'weakFilter',
showDataShadow: false,
width: 14,
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: 14,
},
],
series: [{
type: 'line',
showSymbol: false,
data: fmtData,
lineStyle: {
// this color setting is no use, why?
color: 'rgb(0,0,0)',
width: 0.5
}
},
{
id: 'stratum-split',
type: 'custom',
data: fmtData,
renderItem: renderStratumSplit
}
]
};
function renderStratumSplit(params, api) {
const val = [api.value(0), api.value(1)];
const c = api.coord(val);
if (val[1] % 2 === 0) {
const c2 = api.coord([0, api.value(1)])
return {
type: 'line',
shape: {
x1: c2[0],
y1: c2[1],
x2: c[0],
y2: c[1]
},
style: api.style({
stroke: `rgba(${Math.random()*255}, 0, 165)`,
lineWidth: 4
})
}
}
}
截图如下
