gwkzb

1. 如下图所示,图的位置大小以及图例的位置:

 

 2. 代码如下图所示:legend位置(图例位置),radius大小(图大小),center位置(图位置)

var option = {
        title: {
          text: \'\',
          subtext: \'\',
          x: \'center\'
        },
        tooltip: {
          trigger: \'item\',
          formatter: "{a} <br/>{b}({d}%)"
        },
        legend: {
          orient: \'vertical\',
          left: \'70%\',  //图例距离左的距离
          y: \'center\',  //图例上下居中
          data: ["甘肃","兰州","济南","上海","徐州"]
        },
        color: [\'rgb(203,155,255)\', \'rgb(149,162,255)\', \'rgb(58,186,255)\',
                \'rgb(119,168,249)\', \'rgb(235,161,159)\'],//五个数据,五个颜色
        series: [
          {
            name: \'\',
            type: \'pie\',
            radius: \'70%\',  //图的大小
            center: [\'35%\', \'50%\'], //图的位置,距离左跟上的位置
            data:[
              {
                name:"甘肃",
                value:\'10\'
              },
              {
                name:"兰州",
                value:\'8\'
              },
              {
                name:"济南",
                value:\'9\'
              },
              {
                name:"上海",
                value:\'5\'
              },
              {
                name:"徐州",
                value:\'6\'
              }
            ]
          }
        ]
      };

3. 环形中间文字,如下图所示:

 

 4. 代码如下图所示:graphic中间文字设置以及一些样式

var option = {
          tooltip: {
            trigger: \'item\',
            show: true,
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            textStyle: {
              align: \'right\'
            },
          },
          color: [\'rgb(149,162,255)\'],
          legend: {
            orient: \'vertical\',
            x: \'left\',
            show: false,
            data: [\'烟尘\']
          },
          graphic: {
            type: \'text\',
            left: \'center\',
            top: \'center\',
            style: {
              text: \'烟尘\',
              textAlign: \'center\',
              fill: \'rgb(149,162,255)\',
              width: 30,
              height: 30,
            }
          },
          series: [
            {
              name: \'\',
              type: \'pie\',
              radius: [\'70%\', \'100%\'],
              avoidLabelOverlap: false,
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{
                      value: 10,
                      name:"烟尘",
                      itemStyle: {
                              label: {
                              show: true,
                              position: \'inside\'
 
                              },
                       },
                    }]
            }
          ]
        };
————————————————
原文链接:https://blog.csdn.net/qq_34790644/article/details/89308738

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-03-27
  • 2021-06-25
  • 2021-12-18
  • 2022-12-23
  • 2021-07-20
  • 2021-07-17
  • 2021-04-14
猜你喜欢
  • 2022-02-01
  • 2021-12-05
  • 2021-12-07
  • 2022-12-23
  • 2021-05-11
  • 2021-05-09
  • 2022-12-23
相关资源
相似解决方案