1. 程式人生 > >echarts實現半圓餅圖

echarts實現半圓餅圖

var myChart = this.$echarts.init(document.getElementById('myChart'))
      let data = [
        {
          value: 57,
          name: '半年分配',
          itemStyle: {
            normal: {
              color: '#087EE0',
              label: {
                show: true,
                formatter: '{c}%',
                textStyle: {color: '#fff'}
              }
            }
          }
        },
        {
          value: 14,
          name: '按月分配',
          itemStyle: {
            normal: {
              color: '#79ADF9',
              label: {
                show: true,
                formatter: '{c}%',
                textStyle: {color: '#fff'}
              }
            }
          }
        },
        {
          value: 29,
          name: '到期分配',
          itemStyle: {
            normal: {
              color: '#C4D5FF',
              label: {
                show: true,
                formatter: '{c}%',
                textStyle: {color: '#fff'}
              }
            }
          }
        }]
      var a = 0
      for (let i = 0; i < data.length; i++) {
        a += data[i].value
      }
      data.push({value: a, name: '__other', itemStyle: {normal: {color: 'rgba(0,0,0,.0)'}}})
      let option = {
        series : [
          {
            name: '產品分配方式',
            type: 'pie',
            startAngle:-180,
            radius : '55%',
            center: ['50%', '60%'],
            data:data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: '{c}%'
              }
            }
          }
        ]
      }
      myChart.setOption(option)