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

Posted 2023-03-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用echarts实现修改折线图中折线颜色与折线上面圆点的颜色一致，麻烦各位解答一下，谢谢相关的知识，希望对你有一定的参考价值。

可以的，每个线都可以人工变颜色。背景也可以变色。线的变色很简单，直接选“设置绘图区格式”背景的变色，也可以选“设置绘图区格式”里面有个图片，你把图片的颜色换按拆线数大小变色也是可以的。参考技术A itemStyle :
                                normal :
                                    color:'green',
                                    lineStyle:
                                        color:'red'


                 ,

参考技术B series : [
name:aymc,
legendHoverLink : false,
type : 'line',
itemStyle :
normal :
color:'#f5bf58',
label :
show : true,
formatter : 'b：c',
position : 'top',
textStyle :
fontWeight : '700',
fontSize : '12',
color:'#f5bf58'

,
lineStyle:
color:'#f5bf58'

,
data : seriesDataArr
]
normal 中color 设置参考技术C option 后边跟上 color:['dark'],

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更改折线图区域颜色折线颜色折点颜色