echarts的字体设置

2023-12-31 08:07:03 浏览数 (1)

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

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

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

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

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

代码语言:javascript复制
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等配置。

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

0 人点赞