echarts 餅圖以及圖例的位置及大小,環圖中間字


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM