在echarts插入自定义动态文字文本

最新推荐文章于 2023-06-08 15:22:19 发布

繁花&遇见

最新推荐文章于 2023-06-08 15:22:19 发布

阅读量3.4k

点赞数

本文链接：https://blog.csdn.net/weixin_40292154/article/details/125301305

版权

Echarts graphic 自定义文本图表样式统计信息

关键词由CSDN通过智能技术生成

在项目开发过程中，需要实现以下的效果
在这里插入图片描述
图表左右两边需要自定义文本,刚开始使用lengend配置项的时候会出现重复渲染的现象，后来用的是graphic
graphic功能比较强大，不止文字，可以看文档：https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-3u872dym.html
下面直接上关键代码

lineOption.graphic.push({
   type: "text",
   left: "11%",
   top: 95 + index * 158,
   style: {
      text: [`缺失率=${item.missRate}`, `最小值=${item.minNum}`, `最大值=${item.maxNum}`].join("\n"),
      font: "500 14px sy",
      fill: "#1D2F2E",
      textLineHeight: 20,
   },
 });
lineOption.graphic.push({
  type: "text",
  left: "79%",
  top: 95 + index * 158,
  style: {
     text: [`平均数=${item.averageValue}`, `中位数=${item.median}`, `95%置信大小=${item.trueSize}`].join("\n"),
     font: "500 14px sy",
     fill: "#1D2F2E",
     textLineHeight: 22,
 }
});