vue3中echarts图表中的面积图areaStyle属性不起效(填充样式被覆盖)

最新推荐文章于 2025-05-26 16:37:16 发布

℘团子এ

最新推荐文章于 2025-05-26 16:37:16 发布

阅读量854

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/2202_75509848/article/details/139085494

1.问题

在折线面积图中，areaStyle属性分别给了绿色和红色，但是红色被绿色覆盖了

2.问题解决

在series配置项中给每个折线对象添加一样stack:"666"属性，这样一般是能解决该问题了；如果不行就去除itemStyle属性并且给areaStyle添加color属性；还不行那就yAxis配置项改成数组(也就是多条y轴)；还不行就毁灭吧！！

3.代码

function initLineEcharts() {
    let chartDom = document.getElementById('line-echarts');
    let myChart = echarts.init(chartDom);
    let option;
    let xAxisData = [];
    let seriesData = [[], []];
    console.log("面积图数据处理前", lineEchartsDate.value);
    lineEchartsDate.value.forEach(item => {
        xAxisData.push(item.dimension);
        seriesData[0].push(item.exceptionCount);
        seriesData[1].push(item.normalCount);
    })

    option = {
        tooltip: {
            trigger: 'axis',
            show: true
        },
        xAxis: {
            type: 'category',
            bou