javascript - vue echarts 饼状图中的红框部分怎么修改样式？

Question

如图所示，我想改这里的字体大小，字体粗细，该怎么做
文档地址：https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
先谢谢各位大哥大姐的解答！

Answer 1

修改这个name就好了

楼下说的是对的，修改label对象中的样式就好了

Answer 2

https://echarts.apache.org/zh/option.html#series-bar.label
参考这个配置项

Answer 3

要修改 Vue ECharts 饼状图中红框部分的样式，你需要调整 ECharts 的 label 配置项。

在你的 ECharts 配置中，找到 series 下的 label 配置，然后修改 textStyle 属性来调整字体大小和粗细。

以下是一个示例代码，展示如何修改字体大小和粗细：

{  // 其他配置项...  series: [    {      type: 'pie',      data: [        { value: 335, name: '直接访问' },        { value: 310, name: '邮件营销' },        { value: 234, name: '联盟广告' },        { value: 135, name: '视频广告' },        { value: 1548, name: '搜索引擎' }      ],      label: {        show: true, // 是否显示标签        formatter: '{b}: {c} ({d}%)', // 标签内容格式        textStyle: { // 文本样式          color: '#000', // 字体颜色          fontSize: 14, // 字体大小          fontWeight: 'bold' // 字体粗细，可选值为 'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, ..., 900        }      }    }  ]}

在上面的代码中，textStyle 属性包含了 color、fontSize 和 fontWeight 三个子属性。你可以根据需要调整这些属性的值来改变红框部分的样式。例如，你可以将 fontSize 设置为更大的值来增大字体大小，将 fontWeight 设置为 'bold' 来设置粗体字体。

请注意，上述代码中的 formatter 属性用于定义标签的显示格式。你可以根据需要自定义格式，以满足你的具体需求。