前端使用echart画图

使用echart画图时,想要在圆环中间展示文字,但这个图的圆心并不在整个div的正中央, 导致在缩放页面的时候图中的文字会偏移.

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/364320
• 你也可以参考下这篇文章：使用多个 echarts 图表后，页面卡住、白屏？
• 除此之外, 这篇博客: Echarts多柱状图数据集接口对接，按钮切换数据。中的  样式代码: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• <style scoped>
  .head {
    height: 35px;
    width: 100%;
    line-height: 35px;
  }   
  .title {
    font-weight: bold;
    font-size: 20px;
    background-image: -webkit-linear-gradient(
      right,
      #3fb5ff,
      #6fe2ff
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }   //标题文字
  
  .el-button--danger {
    color: #fff;
    background-color: #1d86f0 !important;
    border-color: #1d86f0 !important;
  } //按钮被选中
  .el-button {
    color: #fff;
    background-color: #0a307e;
    border-color: #1d86f0;
  } 按钮
  </style>

圆中间的字可以用echart自带的文字就好了，非得自己弄的话，那就一楼说的那种，居中圆环即可

您可以通过设置echart的grid属性来调整图表的位置，使其圆心位于div的正中央。例如，设置grid的left和top属性为50%可以将图表居中对齐：

option = {
    grid: {
        left: '50%',
        top: '50%',
        bottom: '0%',
        containLabel: true
    },
    series: [{
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
            position: 'center',
            formatter: '{b}\n{c}'
        },
        data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
        ]
    }]
};

然后，在label属性中设置position为'center'，这样文字就会居中显示在圆环中间，无论如何缩放页面，文字都不会偏移。