echarts 餅圖環形圖圖例位置

 

 

 

   option = {
        title: {
          text: '',
          textStyle: {
            color: '#17F0E3',
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return `${params.name}${params.value}  占比%`
          },
        },
        legend: {
          orient: '', //刪除此項圖例是水平展示，添加此項圖例垂直展示
          x: 'right', //x : 左（left）、右（right）、居中（center）
          y: 'bottom', //y : 上（top）、下（bottom）、居中（center）
          padding: [0, 0, 0, 0], //padding:[0,30,0,0] [（上），（右）、（下）、（左）]

          icon: 'pin',

          textStyle: {
            //圖例文字的樣式
            color: '#fff',
            fontSize: 12,
          },
          data: ['加油消費車', '加氣消費車', '充電消費車', '未消費車'],
        },
        grid: {
          //設置圖表撐滿整個畫布
          top: '12px',
          left: '12px',
          right: '16px',
          bottom: '12px',
          containLabel: true,
        },
        series: [
          {
            hoverAnimation: false, //鼠標懸浮是否有區域彈出動畫，false:無  true:有
            name: '',
            type: 'pie',
            radius: ['75%', '85%'], //設置餅圖大小寬度
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
                formatter: function (data) {
                  // 設置圓餅圖中間文字排版
                  return data + '\n' + '車流里總數'
                },
              },
              emphasis: {
                show: false, //文字至於中間時，這里需為true
                textStyle: {
                  //設置文字樣式
                  fontSize: '12',
                  color: '#fff',
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 450,
                name: '加油消費車',
                itemStyle: { color: '#59CFFF' },
              },
              {
                value: 620,
                name: '加氣消費車',
                itemStyle: { color: '#7B79FF' },
              },
              {
                value: 80,
                name: '充電消費車',
                itemStyle: { color: '#23B89A' },
              },
              { value: 170, name: '未消費車', itemStyle: { color: '#B3B3B3' } },
            ],
          },
        ],
      }