echarts实现极坐标圆环柱状图图表效果代码-html代码-BFW代码库

echarts实现极坐标圆环柱状图图表效果代码

代码语言：html

所属分类：图表

代码描述：echarts实现极坐标圆环柱状图图表效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
#main {
  width: 1000px;
  height: 400px;
  background: black;
}
</style>




</head>

<body >

<div id="main"></div>

  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.1.1.js"></script>
      <script >
const color = ['#90BCDE', '#A451F1', '#635BC1', '#2B62B1', '#3B478D'];
const data = [{
  name: '网络利用率',
  value: 0.12 },
{
  name: '显存利用率',
  value: 0.23 },
{
  name: '显卡利用率',
  value: 0.34 },
{
  name: '内存利用率',
  value: 0.45 },
{
  name: 'CPU利用率',
  value: 0.73 }];


const seriesForBg = {
  type: 'bar',
  name: 'bg',
  barCategoryGap: '50%',
  animation: false,
  data: data.map(d => {
    return {
      name: d.name,
      value: 1,
      itemStyle: {
        color: 'rgba(27,36,62,0.5)' } };


  }),
  coordinateSystem: 'polar',
  slient: true,
  center: ['65%', '50%'] };


const seriesForData = {
  type: 'bar',
  name: 'value',
  barGap: '-100%',
  barCategoryGap: '50%',
  data: data.map((d, i) => {
    return {
      name: d.name,
      value: d.value,
      itemStyle: {
        color: color[i] } };


  }),
  coordinateSystem: 'polar',
  slient: true,
  center: ['65%', '50%'] };

const options = {

  angleAxis: {
    max: 1,
    axisLine: {
      show: false },

    axisTick: {
      show: false },

    axisLabel: {
      show: false },

    splitLine: {
      show: false },

    splitArea: {
      show: false } },


  radiusAxis: {
    type: 'category',
    data: data.map(d => {
      return d.name +.........完整代码请登录后点击上方下载按钮下载查看