echarts实现rose玫瑰扇形图表效果代码-html代码-BFW代码库

echarts实现rose玫瑰扇形图表效果代码

代码语言：html

所属分类：图表

代码描述：echarts实现rose玫瑰扇形图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
#main {
  width: 600px;
  height: 400px;
}
</style>




</head>

<body  >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.1.1.js"></script>
<div id="main"></div>


  
      <script  >
function dataProcess (data) {
  const len = data.length
  const placeholder = {
    value: 0,
    itemStyle: {
        opacity: 0
    },
    label: {
        show: false
    },
    labelLine: {
        show: false
    }
  }
  let i =0
  while (i < len) {
    data.push(placeholder)
    i++
  }
  return data
}

const data = [{
    name: '危急',
    value: 13
}, {
    name: '高危',
    value: 39
}, {
    name: '中危',
    value: 25
}, {
    name: '低危',
    value: 75
}]

console.log(dataProcess(data))

const seriesForData = {
    roseType: "area",
    type: "pie",
    z: 5,
    data: data,
    center: ['10%', '50%'],
    radius: ['10%', '50%'],
    label: {
        normal: {
            color: '#fff',
            formatter: '{b|{b}} {c|{c}} 台',
            rich: {
                b: {
                    color: "#fff"
                },
                c: {
                    fontWeight: "bold"
                }

            }
        },
        labelLine: {
            normal: {
                length: 0,
                length2: 200,
                lineStyle: {
    .........完整代码请登录后点击上方下载按钮下载查看