echarts饼图

最新推荐文章于 2024-11-06 20:20:40 发布

张杰伦i

最新推荐文章于 2024-11-06 20:20:40 发布

阅读量107

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_25750473/article/details/120952797

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;margin: 100px auto"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
<script>
  const myChart = echarts.init(document.getElementById('chart'), 'dark')
const data = [{
    "name": "人力资源", //项目
    "value": 21, //数量
  },
    {
      "name": "信息管理与信息系统", //项目
      "value": 12, //数量
    },
    {
      "name": "发电厂及电力系统", //项目
      "value": 10, //数量
    },
 ]
  const option = {
    grid: {
      bottom: 0,
      left: 0,
      right: 0
    },
    legend: {
      show:false,
      orient: 'vertical',
      top: 'middle',
      right: '5%',
      textStyle: {
        color: '#f2f2f2',
        fontSize: 25,
      },
      icon: 'roundRect'
    },
    tooltip: {
      show: true,
      padding: 0,
      borderWidth: 0,
      textStyle: {
        color: '#ffffff',
        fontSize: 14,
        lineHeight: 20,
      },
      formatter:tooltip
    },
    series: [
      // 主要展示层的
      {
        radius: ['45%', '60%'],
        center: ['45%', '50%'],
        type: 'pie',
        z: 3,
        itemStyle: {
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 20,
          lineStyle: {
            color: '#53A5FF',
            width: 0.5,
          },
        },
        label:{
          overflow: 'none',
          borderWidth: 0,
          color: '#53A5FF',
          fontStyle: 'normal',
          fontWeight: 400,
          fontFamily: 'Digital-7',
          fontSize: 14,
        },
        data: data,
      },
      // 边框的设置
      {
        radius: ['45%', '65%'],
        center: ['45%', '50%'],
        type: 'pie',
        label: {
          show: false,
        },
        labelLine: {
          show: false
        },
        tooltip: { show: false },
        emphasis: {
          scale: false,
        },
        itemStyle: {
          opacity:0.5
        },
        data: data,
      }
    ]
  }
  myChart.setOption(option)
  function tooltip(params){
    return `<div style="background: #010E3E;border-radius: 4px;padding: 4px 7px 4px 8px;display: flex;align-items: center;font-size: 14px;line-height: 20px;;">
                  <span style="background: ${ params.color };margin-right: 5px;width: 8px;
                  height: 8px;border-radius: 3px;"></span>${ params.name }：${ params.value }人
                </div>`
  }
</script>
</body>
</html>