一、多系列

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

echarts折线图圆点大小详解