ECharts折线图填充区域颜色匹配折线颜色（visualMap配置）问题

问题背景 #

我找到一个ECharts的解决方案，原本期望实现折线分段颜色匹配对应填充色的效果，但实际测试出现问题：

• 最初用visualMap配置时，修改dimension参数：
  • 设为1：折线分段颜色正常变化，但填充色始终为蓝色
  • 设为0：填充和折线均为蓝色
  • 设为2：填充和折线均为黄色
• 尝试拆分series和dataset的方案后，出现整个区域变色而非分段变色的问题

最初配置代码（使用visualMap） #

async function createLineChartNew(element) {
    echarts.registerTheme("sauce", theme.getTheme("dynamic"));
    addEventListener("resize", resizeCharts);
    
    const dataPoints = defaultLineChartLen;
    const fields = [
        {
        id: "power",
        name: "Power",
        color: "rgb(255,255,255)",
        domain: [0, 1000],
        rangeAlpha: [0.4, 1],
        points: [],
        get: (x) => x.state.power || 0,
        fmt: (x) => H.power(x, { seperator: " ", suffix: true }),
        },
    ];
    var options = {
        title: {
        show: false,
        },
        tooltip: {
            className: "ec-tooltip",
            trigger: "axis",
        axisPointer: {
            type: "cross",
            lineStyle: {
            type: "dashed",
            },
            label: {
            backgroundColor: "#38b5ca",
            },
        },
        },
        toolbox: {
        show: false,
        },
        xAxis: {
        boundaryGap: false,
        splitLine: {
            lineStyle: {
            color: "#ededed",
            },
        },
        axisLine: {
            lineStyle: {
            color: "#ededed",
            },
        },
        axisPointer: {
            snap: true,
        },
        axisLabel: {
            color: "#e0e0e0",
        },
        data: Array.from(new Array(dataPoints)).map((x, i) => i),
        },
        yAxis: {
        position: "right",
        type: "value",
        axisLabel: {
            formatter: "{value} BTC",
            color: "#e0e0e0",
        },
        splitLine: {
            lineStyle: {
            color: "#ededed",
            },
        },
        axisLine: {
            lineStyle: {
            color: "#ededed",
            },
        },
        min: 0,
        max: 800,
        },
        series: [
        {
            id: "power",
            name: "Some title",
            type: "line",
            smooth: true,
            showSymbol: false,
            symbolSize: 6,
            symbol: "circle",
            lineStyle: {
            // color: colors.GREEN, // NEED TO MAP THIS VALUE FOR EVERY SECTION
            // shadowColor: colors.GREEN, // NEED TO MAP THIS VALUE FOR EVERY SECTION
            shadowBlur: 4,
            },
            itemStyle: {
            color: "#38b5ca",
            },
            areaStyle: {
            normal: {
                // NEED TO MAP THIS VALUE FOR EVERY SECTION
                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //   offset: 0,
                //   color: 'rgb(255, 255, 255)'
                // }, {
                //   offset: 1,
                //   color: colors.GREEN
                // }]),
                opacity: 0.2,
            },
            },
        },
        ],
        //color: fields.map((f) => f.color),
        grid: { top: 0, left: 0, right: 0, bottom: 0 },
        legend: { show: false },
        visualMap: {
        type: "piecewise",
        show: false,
        dimension: 1,
        pieces: [
            {
            lte: 251,
            color: "rgb(11, 190, 235)",
            },
            {
            gt: 251,
            lte: 302,
            color: "rgb(255, 197, 0)",
            },
            {
            gt: 302,
            lte: 492,
            color: "rgb(251, 139, 4)",
            },
            {
            gt: 492,
            color: "rgb(237, 31, 143)",
            },
        ],
        },
    };

    const lineChart = echarts.init(element, "sauce", { renderer: "svg" });
    lineChart.setOption(options);
    chartRefs.add(new WeakRef(lineChart));
    return lineChart;
    }

    function bindLineChartNew(lineChart, renderer)
    {
        const dataPoints = defaultLineChartLen;
        let lastRender = 0;
        const fields = [
            {
            id: "power",
            name: "Power",
            color: "rgb(255,255,255)",
            domain: [0, 1000],
            rangeAlpha: [0.4, 1],
            points: [],
            get: (x) => x.state.power || 0,
            fmt: (x) => H.power(x, { seperator: " ", suffix: true }),
            },
        ];
        renderer.addCallback((data) => {
            const now = Date.now();
            if (now - lastRender < 900)
                return;
            lastRender = now;
            if (data && data.state) {
                for (const x of fields) {
                x.points.push(x.get(data));
                while (x.points.length > dataPoints) {
                    x.points.shift();
                }
                }
            }
            lineChart.setOption({
                xAxis: [
                {
                    data: Array.from(sauce.data.range(dataPoints)),
                },
                ],
                series: fields.map((field) => ({
                data: field.points,
                name: typeof field.name === "function" ? field.name() : field.name,
                })),
            });
        });
    }

修改后的尝试代码（拆分series和dataset） #

尝试适配方案后更新代码，但出现整个区域变色而非分段变色的问题：

var seriesList = [];
var filteredDatasets = [];
var points = [];

async function createLineChartNew(element) {
  echarts.registerTheme("sauce", theme.getTheme("dynamic"));
  addEventListener("resize", resizeCharts);
  
  const dataPoints = defaultLineChartLen;
  var options = {
    dataset: filteredDatasets,
    title: {
        show: false,
    },
    xAxis: {
        type: 'category',
      boundaryGap: false,
      data: Array.from(new Array(dataPoints)).map((x, i) => i),
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} W",
      },
    },
    series: seriesList,
    grid: { top: 0, left: 0, right: 0, bottom: 0 },
  };

  const lineChart = echarts.init(element, "sauce", { renderer: "svg" });
  lineChart.setOption(options);
  chartRefs.add(new WeakRef(lineChart));
  return lineChart;
}

var colors = {
    ftp: 'rgb(11, 190, 235)',
    map: 'rgb(255, 197, 0)',
    ac: 'rgb(251, 139, 4)',
    nm: 'rgb(237, 31, 143)'
};

function bindLineChartNew(lineChart, renderer)
{
    const dataPoints = defaultLineChartLen;
    let lastRender = 0;
    renderer.addCallback((data) => {
        // don't render too often
        const now = Date.now();
        if (now - lastRender < 900) return;
        lastRender = now;

        // skip if there is no data
        if (!data || !data.state) return;

        let power = data.state.power || 0;

        // add a new data point, then drop front until desired length
        var x = 0;
        if (points.length > 0) {
            x = points.at(-1).x + 1;
        }
        points.push({x: x, y: power});
        while (points.length > dataPoints) points.shift();

        while (filteredDatasets.length > 0) filteredDatasets.shift();

        for (let ix = 0; ix < points.length - 1; ++ix)
        {
            const datasetId = ix;
            const datasetSliced = points.slice(ix, ix + 2);
            
            filteredDatasets.push({
                id: datasetId,
                source: datasetSliced,
            });

            if (power <= 240)
            {
                seriesList.push({
                    type: 'line',
                    datasetId: datasetId,
                    color: 'green',
                    areaStyle: {color: 'lightgreen'}
                });
            }
            else if (power <= 302)
            {
                seriesList.push({
                    type: 'line',
                    datasetId: datasetId,
                    color: 'red',
                    areaStyle: {color: 'rgb(255,173,177)'}
                });
            }
            else if (power <= 492)
            {
                seriesList.push({
                    type: 'line',
                    datasetId: datasetId,
                    color: 'green',
                    areaStyle: {color: 'lightgreen'}
                });
            }
            else
            {
                seriesList.push({
                    type: 'line',
                    datasetId: datasetId,
                    color: 'red',
                    areaStyle: {color: 'rgb(255,173,177)'}
                });
            }
        }

        while (seriesList.length > dataPoints) seriesList.shift();

        // now update the line chart
        lineChart.setOption({
            dataset: filteredDatasets,
            xAxis: [
            {
                data: Array.from(sauce.data.range(dataPoints)),
            },
            ],
            series: seriesList,
        });
    });
}

内容的提问来源于stack exchange，提问作者jessicah