Echarts折線圖表折線顏色與圖例顏色不符且折線顏色自定義失敗問題

本文轉載自查看原文 2021-05-18 08:37 3153 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>

修改后的效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts 折線圖 areaStyle顏色重疊問題 Android-自定義折線圖 Android自定義控件：圖形報表的實現（折線圖、曲線圖、動態曲線圖）（View與SurfaceView分別實現圖表控件） echarts折線圖堆疊樣式圖表只顯示一類折線圖 echarts 改變折線圖曲線顏色、區域顏色 Echarts 圖表折線圖入門+輪播數據 echarts_部分圖表配置_堆疊折線圖 canvas圖表(2) - 折線圖 echarts常用方法，legend顏色自定義，折線label顯示問題（五）