echarts的字体设置

bisal

发布于 2023-12-31 08:07:03

3150

发布于 2023-12-31 08:07:03

文章被收录于专栏：bisal的个人杂货铺

最近用了百度echarts做PPT的图，还是比较方便的，其中有些图标题和标签的字体是可以设置的，示例中可能没说，提供几个参考。

echarts的介绍和具体操作可参考《图表数字化的制作神器》

饼图中如果需要设置标题和标签字体，如下所示，

1. "测试图"字体设置，title中增加textStyle，可以设置fontSize、fontWeight等各种配置。

2. "需求"字体设置，series中增加lable标签，可以设置fontSize等。

option = {
  title: {
    text: '测试图',
    left: 'center',
    textStyle: {
      fontSize: 30,
      fontWeight: 'bold'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  ...
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 4, name: '需求' },
        { value: 32, name: '测试' },
        { value: 29, name: '投产' }
      ],
      "label": {
        "normal": {
          "show": true,
          "textStyle": {
            "fontSize": 19
          }
        },
        "emphasis": {
          "show": true
        }
      },
   ...

柱状图如果需要设置标题和标签字体，如下所示，

1. "测试图"字体设置，同上，title中增加textStyle，可以设置fontSize、fontWeight等各种配置。

2. "需求"的字体设置，xAxis和yAxis的axisLabel中可以设置fontSize。

3. 图中"1"数字的字体设置，series中增加lable标签，配置textStyle，可以设置fontSize等配置。

...
xAxis: {
  type: 'value',
  axisLabel: {fontSize: 17},
},
yAxis: {
  type: 'category',
  axisLabel: {fontSize: 21},
  data: [ '投产', '测试', '需求']
},
...
series: [
...
label: {
  show: true,
  textStyle: {
    fontSize: 15,
    fontWeight: 'bold',
    fontStyle: 'italic', 
  },
 ...

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-12-29，如有侵权请联系 cloudcommunity@tencent.com 删除

echarts