echarts中boundaryGap属性

boundaryGap:false

boundaryGap:true

 

 

 代码处:

 xAxis: {
          type: "category",
          data: ["06-01", "06-07", "06-13", "06-19", "06-25", "07-01"],
          boundaryGap: true,//-------------------这
          axisLabel: {
            interval: 0
          },
          axisLine: {
            lineStyle: {
              color: "#000"
            }
          }
        },

 

转载于:https://www.cnblogs.com/520BigBear/p/11535664.html

### ECharts Series 属性详解 #### 基本概念 `series` 是 ECharts 中用于定义图表数据序列的关键属性。每个 `series` 对象代表一组数据及其可视化方式,可以是折线图、柱状图、饼图等多种类型的图表。 #### 主要配置项 ##### 类型 (`type`) 指定图表类型,常见的有 `'line'`, `'bar'`, `'pie'` 等。 ```javascript { type: 'line' } ``` ##### 数据 (`data`) 提供具体的数据集,通常是一个数组形式。 ```javascript { data: [120, 132, 101, 134, 90, 230, 210] } ``` ##### 名称 (`name`) 给当前系列命名,在多条曲线共存的情况下尤为重要。 ```javascript { name: 'Series Name', ... } ``` ##### 样式 (`itemStyle`) 自定义单个数据项的样式,如颜色等[^4]。 ```javascript { itemStyle: { color: function(params) { return params.value > 10 ? 'red' : '#ccc'; } }, ... } ``` ##### 堆叠 (`stack`) 当多个系列共享同一坐标轴时,通过此参数实现数值累加效果[^3]。 ```javascript { stack: '总量', ... } ``` #### 进阶配置 ##### 动态加载 (`loadingEffect`) 对于大数据量场景下的性能优化措施之一。 ```javascript { loadingEffect: { show: true, period: 30 }, ... } ``` ##### 平滑处理 (`smooth`) 使线条更加圆润流畅,适用于折线图。 ```javascript { smooth: true, ... } ``` ##### 区域填充 (`areaStyle`) 为区域面积着色,增强视觉表现力。 ```javascript { areaStyle: {}, ... } ``` #### 实际应用案例 下面展示了一个完整的 `series` 配置实例: ```javascript option = { xAxis: { type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [{ name: '销量', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210], itemStyle: { color: 'blue' }, areaStyle: {} }] }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值