Echarts折线图表折线颜色与图例颜色不符且折线颜色自定义失败问题

Posted 2021-05-18 王文清

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts折线图表折线颜色与图例颜色不符且折线颜色自定义失败问题相关的知识，希望对你有一定的参考价值。

咳咳，第一篇博客写一下自己踩过的Echarts有关折线图的坑

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts 图表数据颜色和图例不对应</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="ec_div" style="width: 500px; height: 500px; position: absolute; left: 50%; transform: translate(-50%)">

</div>
<script>
    var eccharts_one = echarts.init(document.getElementById("ec_div"));

    var option = {
        title: {
            text: \'例子\'
        },
        tooltip: {},
        legend: {
            data: [\'男\',\'女\']
        },
        xAxis: {
            data: [\'一年级\',\'二年级\',\'三年级\',\'四年级\']
        },
        yAxis: {},
        series: [{
            name: \'男\',
            type: \'line\',
            data: [10,18,12,16],
            itemStyle: {
                normal: {
                    lineStyle: \'yellow\'
                }
            }
        },{
            name: \'女\',
            type: \'line\',
            data: [11,24,17,12],
            itemStyle: {
                normal: {
                    lineStyle: \'blue\'
                }
            }
        }]
    }
    eccharts_one.setOption(option);

</script>
</body>
</html>

效果：

我发现我同事有这样写过自定义Echarts折线图表的颜色，通过效果图可以发现并不起作用。

纠正：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts 图表数据颜色和图例不对应</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="ec_div" style="width: 500px; height: 500px; position: absolute; left: 50%; transform: translate(-50%)">

</div>
<script>
    var eccharts_one = echarts.init(document.getElementById("ec_div"));

    var option = {
        title: {
            text: \'例子\'
        },
        tooltip: {},
        legend: {
            data: [\'男\',\'女\']
        },
        xAxis: {
            data: [\'一年级\',\'二年级\',\'三年级\',\'四年级\']
        },
        yAxis: {},
        series: [{
            name: \'男\',
            type: \'line\',
            data: [10,18,12,16],
            itemStyle: {
                color: \'yellow\' // 新加的代码
                // normal: {
                //     lineStyle: \'yellow\' // 注释掉的无作用代码
                // }
            }
        },{
            name: \'女\',
            type: \'line\',
            data: [11,24,17,12],
            itemStyle: {
                color: \'blue\' // 新加的代码
                // normal: {
                //     lineStyle: \'blue\' // 注释掉的无作用代码
                // }
            }
        }]
    }
    eccharts_one.setOption(option);

</script>
</body>
</html>

修改后的效果：

以上是关于Echarts折线图表折线颜色与图例颜色不符且折线颜色自定义失败问题的主要内容，如果未能解决你的问题，请参考以下文章

如何用echarts实现修改折线图中折线颜色与折线上面圆点的颜色一致，麻烦各位解答一下，谢谢

Echarts自定义折线图例,增加选中功能

echarts 折线图第二条折线的值总是第一条折线加第二条折线的和，怎么设置为不是这样

echarts更改折线图区域颜色折线颜色折点颜色

ECharts 设置折线颜色和小圆点颜色

echarts使用小总结