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轴最大值、取消圆点、折点代码、拐点实心、大小设置等多个方面。希望能够对大家有所帮助。