Echarts在线免费图表

 
            var series = [];
var calcRateObjs = [];
var sqxf = [
  {
    name: '5公里以内',
    value: 1000,
  },
  {
    name: '5-10公里',
    value: 130,
  },
  {
    name: '10公里以上',
    value: 90,
  }
];
let colors = ["yellow","blue","green"];
var valValues = sqxf.map((item) => item.value);
let total = valValues.reduce((x, y) => x + y);
total = total+(total/0.45);
var sumValue = valValues.reduce(function (total, currentVal) {
  return total + currentVal;
});
for (let i = 0; i < sqxf.length; i++) {
  series.push({
    name: '',
    type: 'pie',
    clockwise: true, //顺时加载
    color: colors[i],
    startAngle: -154.3,
    emphasis: {
      scale: false
    }, //鼠标移入变大
    radius: [73 - i * 15 + '%', 65 - i * 15 + '%'],
    center: ['55%', '55%'],
    label: {
      show: false
    },
    itemStyle: {
      borderWidth: 30, //圆柱图宽度
      borderRadius: 30, //光环宽度
      borderColor: 'rgba(0, 0, 0, 0)',
      borderDashOffset: 20
    },
    data: [
      {
        value: sqxf[i].value,
        name: sqxf[i].name
      },
      {
        value:
          total - sqxf[i].value == 0 ? 1 : total - sqxf[i].value,
        name: '',
        itemStyle: {
          color: 'transparent'
        },
        emphasis: {
          scale: false
        }
      }
    ]
  });
  series.push({
    name: '',
    type: 'pie',
    clockWise: true,
    hoverAnimation: true,
    radius: [73 - i * 15 + '%', 65 - i * 15 + '%'],
    center: ['55%', '55%'],
    startAngle: -154.3,
    label: {
      show: false
    },
    progress: {
      show: true,
      overlap: false,
      roundCap: true,
      clip: false,
      itemStyle: {
        borderWidth: 1,
        borderColor: '#464646'
      }
    },
    itemStyle: {
      borderRadius: 30
    },
    data: [
      {
        value: 4.5,
        itemStyle: {
          color: '#C5CAE9',
          opacity: 0.1
        },
        emphasis: {
          scale: false
        }
      },
      {
        value: 2.5,
        itemStyle: {
          color: 'rgba(0,0,0,0)'
        },
        emphasis: {
          scale: false
        }
      }
    ]
  });
  calcRateObjs.push({
    name: sqxf[i].name,
    value: ((sqxf[i].value / sumValue) * 100).toFixed(2) + '%'
  });
}
option = {
  backgroundColor: '#012d65',
  title: {
    show: false,
    text: '商圈',
    left: 'center',
    top: '10%',
    textStyle: {
      fontSize: 32,
      color: '#fff'
    }
  },
  legend: {
    show: false,
    top: '18%',
    left: '50%',
    itemWidth: 10,
    itemHeight: 2,
    padding: [0, 12],
    width: 26,
    itemGap: -3,
    formatter: function (name) {
      var calcRate = calcRateObjs.find(function (item) {
        if (name === item.name) {
          return item;
        }
      });
      return '{value|' + calcRate.value + '}';
    },
    textStyle: {
      rich: {
        value: {
          fontSize: 32,
          height: 60,
          lineHeight: 66,
          color: 'rgb(207, 220, 40)'
        }
      }
    }
  },
  color: [
    'rgb(9,187,247)',
    'rgb(184,254,165)',
    'rgb(253,218,23)',
    'rgb(252,152,12)'
  ],
  xAxis: [
    {
      show: false
    }
  ],
  series: series
};