echart柱状图series属性设置label显示字体大小及字体样式

echart柱状图series属性设置label显示字体大小及字体样式

直接上代码

series: [
  {
    label: {
      show: true, // 是否显示标签
      position: 'top', // 标签位置,可选值为:top、bottom、center、inside(柱状图内部)、outside(柱状图外部)
      textStyle: {
        color: '#333', // 标签字体颜色
        fontSize: 14, // 标签字体大小
        fontWeight: 'bold', // 标签字体加粗
        fontStyle: 'italic', // 标签字体斜体
        fontFamily: 'Arial' // 标签字体
      }
    },
    data: [/* 数据 */]
  }
]

其中,textStyle属性用于设置字体样式,包括字体颜色、字体大小、字体加粗、字体斜体、字体。

例如,将标签字体大小设置为16,字体颜色设置为蓝色:

series: [
  {
    label: {
      show: true, // 是否显示标签
      position: 'top', // 标签位置
      textStyle: { // 字体样式
        color: 'blue', // 标签字体颜色
        fontSize: 16, // 标签字体大小
      }
    },
    data: [/* 数据 */]
  }
]
### 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、付费专栏及课程。

余额充值