echarts折線圖圓點大小詳解

一、多系列

在echarts中，一個折線圖可以包含多個系列，每個系列都有自己的圓點大小設置，當然，也可以使用公共的設置。可以通過以下代碼設置每個系列的圓點大小：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'series1',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320],
            symbolSize:10,   //設置圓點大小為10
        },
        {
            name:'series2',
            type:'line',
            data:[720, 732, 701, 734, 990, 1030, 820],
            symbolSize:5,   //設置圓點大小為5
        }
    ]
};

在上面的代碼中，我們通過設置每個系列的symbolSize屬性來設置圓點大小。同時，我們也可以使用一個數組來設置每個系列的圓點大小：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'series1',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320],
            symbolSize:[10,15,20,25,30,35,40],   //設置圓點大小數組
        },
        {
            name:'series2',
            type:'line',
            data:[720, 732, 701, 734, 990, 1030, 820],
            symbolSize:[5,10,15,20,25,30,35],   //設置圓點大小數組
        }
    ]
};

二、空心圓點大小

當然，我們也可以設置圓點為空心的，在echarts中，我們可以使用itemStyle屬性來設置每個圓點的樣式。以下是一個實現空心圓點大小的代碼示例：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'series1',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320],
            symbolSize: function (data) {
                return data > 1200 ? 10 : 5;
            },
            itemStyle:{
                normal:{
                    borderColor:'red',   //設置空心圓點邊框顏色
                    borderWidth:2,   //設置空心圓點邊框寬度
                    opacity:0.5,   //設置空心圓點透明度
                    color:'#ffffff',   //設置空心圓點填充顏色
                }
            }
        }
    ]
};

三、y軸最大值

有時候，在echarts折線圖中，我們會發現y軸的最大值與我們期望的不符合，此時我們需要設置y軸的最大值，以使圖表更符合我們的期望。以下是一個使用max屬性設置y軸最大值的代碼示例：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        max:1500,   //設置y軸的最大值為1500
    },
    series: [
        {
            name:'series1',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320],
        }
    ]
};

四、取消圓點

有些情況下，我們不希望在echarts折線圖中顯示圓點，此時可以使用symbol屬性設置為空字元串來取消圓點。以下是一個取消圓點的代碼示例：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'series1',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320],
            symbol: '',   //設置為空字元串，取消圓點
        }
    ]
};

五、折點代碼

在echarts中，我們可以通過設置lineStyle屬性來控制折線的樣式，以下是一個實現折點代碼的代碼示例：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'series1',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320],
            symbol: 'circle',
            lineStyle:{
                normal:{
                    type: 'dashed',
                    color: 'red',
                    width: 2,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 10,
                    shadowOffsetY: 8,
                },
                emphasis:{
                    color: 'blue',
                    lineDash: [5,2],
                    width: 3,
                }
            }
        }
    ]
};

六、拐點實心

有些情況下，我們希望拐點為實心圓，這時可以使用symbol屬性設置為circle來實現。以下是一個拐點實心的代碼示例：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'series1',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320],
            symbol: 'circle',
            symbolSize: 8,   //設置圓點大小
            itemStyle:{
                normal:{
                    color:'#00bfff',   //設置實心圓顏色
                    borderWidth:2,   //設置邊框寬度
                    borderColor:'#fff',   //設置邊框顏色
                    opacity:1,   //設置透明度
                }
            },
            lineStyle:{
                normal:{
                    color:'#00bfff',   //設置折線顏色
                }
            }
        }
    ]
};

七、大小設置

在echarts中，我們也可以使用回調函數來設置圓點的大小，以下是一個使用回調函數設置圓點大小的代碼示例：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'series1',
            type:'line',
            data:[820, 932, 901, 934, 1290, 1330, 1320],
            symbolSize: function (data) {
                return Math.sqrt(data)/5;   //使用回調函數設置圓點大小，sqrt(data)開平方根
            }
        }
    ]
};

以上就是echarts折線圖圓點大小的詳細介紹，包括多系列、空心圓點大小、y軸最大值、取消圓點、折點代碼、拐點實心、大小設置等多個方面。希望能夠對大家有所幫助。