ECharts 使用series.showAllSymbol显示所有数据点

小灰灰 2023-10-06 12:57 11阅读 0赞

#### 1 使用详解 ####

**series.showAllSymbol**

说明：显示数据点，只在主轴为类目轴（axis.type为'category'）时有效。

默认值：'auto'。

参数类型：boolean，string。

可选值：

（1）'auto'，如果有足够空间则显示数据点，否则随主轴标签间隔隐藏策略。

（2）true，显示所有数据点。

（3）false，随主轴标签间隔隐藏策略。

#### 2 原始效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

#### 3 实现代码 ####

var option = {
        title: {
            text: '第一个 ECharts 实例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20],
            showAllSymbol: true,//标注所有数据点
        }]
    };

#### 4 最终效果图（显示所有数据点） ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200714104111358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200714104324864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70