Echarts在线免费图表

 
            let data = [
  { name: '使用中', value: 70 },
  { name: '闲置', value: 30 },
  // { name: '自用', value: 50 },
  // { name: '办公', value: 20 },
  // { name: '餐饮', value: 16 },
  // { name: '住宿', value: 24 },
]
const colors = ['#2577ff', '#d542ff', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF']
const chartData = data.map((item, index) => ({
  value: item.value,
  name: item.name,
  itemStyle: {
    shadowBlur: 20,
    shadowColor: `#${(((index + 1) % 7) + 10) * 100 + 99}`,
    shadowOffsetx: 25,
    shadowOffsety: 20,
    color: colors[index % colors.length],
  },
}))
const sum = chartData.reduce((per, cur) => per + cur.value, 0)
const gap = (1 * sum) / 100
const pieData1 = []
const gapData = {
  name: '',
  value: gap,
  itemStyle: {
    color: 'transparent',
  },
}

for (let i = 0; i < chartData.length; i++) {
  // 第一圈数据
  pieData1.push({
    ...chartData[i],
  })
  pieData1.push(gapData)
}
let option = {
  backgroundColor: '#102146',
  title: {
    show: true,
    text: sum,
    subtext: '总建筑面积平方米',
    x: '35%',
    y: '48%',
    itemGap: 6,
    textStyle: {
      color: '#fff',
      fontSize: 12,
      fontWeight: '400',
      lineHeight: 6,
    },
    subtextStyle: {
      color: '#fff',
      fontSize: 8,
      fontWeight: '400',
      lineHeight: 6,
    },
    textAlign: 'center',
  },

  legend: {
    orient: 'vertical',
    icon: 'circle',
    textStyle: {
      color: '#f2f2f2',
      fontSize: '12px',
      height: 30
    },
    top: '50%',
    right: '15%',
    itemGap: 14,
    itemHeight: 14,
    itemWidth: 14,
    data: chartData,
    formatter: function (name) {
      const selectedItem = chartData.find((item) => `${item.name}`.includes(`${name}`));
      if (selectedItem) {
        const { value } = selectedItem;
        const p = ((value / sum) * 100).toFixed(2);
        const area = `${value}m²`;
        return `${name}  ${p}%  ${area}`;
      } else {
        return name;
      }
    }
  },
  series: [
    // 中间圆环
    {
      name: '',
      type: 'pie',
      roundCap: true,
      radius: ['36%', '52%'],
      center: ['35%', '50%'],
      data: pieData1,
      labelLine: {
        length: 8,
        length2: 16,
        lineStyle: {
          width: 1,
        },
      },
      label: {
        show: false,
        fontFamily: 'ysbth',
        position: 'outside',
        padding: [0, -4, 0, -4],
        formatter(params) {
          if (params.name === '') {
            return ''
          }
          return `${params.percent.toFixed(0)}%`
        },
        color: '#fff',
        fontSize: '14px',
        lineHeight: 10,
      },
      emphasis: {
        // 鼠标移入时显示
        label: {
          show: true,
        },
      },
    },
    // 最里面圆环
    {
      type: 'pie',
      radius: ['28%', '29%'],
      center: ['35%', '50%'],
      animation: false,
      hoverAnimation: false,
      data: [
        {
          value: 100,
        },
      ],
      label: {
        show: false,
      },
      itemStyle: {
        color: '#3BC5EF',
      },
    },
    // 最外面的圆环
    {
      type: 'pie',
      color: ['#1a4a8c', 'rgba(0,0,0,0)', '#1a4a8c', 'rgba(0,0,0,0)'],
      radius: ['60%', '61%'],
      center: ['35%', '50%'],
      label: {
        show: false,
      },
      select: {
        display: false,
      },
      tooltip: {
        show: false,
      },
      data: [100]
    },
  ],
}