echarts 环形图

echarts 环形图，多层嵌套，自定义 legend 位置、颜色，中间插入数据及文字，颜色渐变；

aibujin

13022人浏览 · 2022-05-16 11:51:42

aibujin · 2022-05-16 11:51:42 发布

Echarts 常用各类图表模板配置

注意：这里主要就是基于各类图表，更多的使用 Echarts 的各类配置项；

以下代码都可以复制到 Echarts 官网，直接预览；

图标模板目录

Echarts 常用各类图表模板配置
一、环形图
二、k 线图
三、折线图
四、横向柱状图
五、折线图 + 柱状图
六、3D 柱状图
七、工程项目可视化
八、雷达图
九、象形柱图
十、环形占比图
十一、圆环动画

一、环形图

Echarts 环形图

option = {
  color: [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(43, 76, 255)' },
      { offset: 1, color: 'rgba(43, 76, 255, 0.28)' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(0, 147, 255)' },
      { offset: 1, color: 'rgba(0, 147, 255, 0.28)' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(255, 194, 0)' },
      { offset: 1, color: 'rgba(255, 194, 0, 0.27)' }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(183, 75, 238)' },
      { offset: 1, color: 'rgba(183, 75, 238, 0.28)' }
    ])
  ],
  legend: {
    type: 'scroll',
    orient: 'vertical',
    right: '8%',
    top: 'center',
    bottom: '20%',
    icon: 'circle',
    itemWidth: 8,
    itemHeight: 8,
    align: 'left',
    formatter: (val) => {
      return ` Echarts \n\n  ${val} | 可视化组件 | 组件`;
    },
    textStyle: {
      color: [],
      padding: [0, 0, 0, 18]
    },
    data: ['一级', '二级', '三级', '四级']
  },
  tooltip: {
    trigger: 'item'
  },
  title: {
    text: '标题',
    left: 'center',
    top: '40%',
    textStyle: {
      textAlign: 'center',
      fill: 'rgba(255, 255, 255, 0.45)',
      fontSize: 36,
      fontWeight: 400
    }
  },
  graphic: {
    type: 'text',
    left: 'center',
    top: '56%',
    zlevel: 1,
    style: {
      text: '描述',
      textAlign: 'center',
      fill: '#9999FF',
      fontSize: 18
    }
  },
  series: [
    {
      name: '环形图',
      type: 'pie',
      zlevel: 3, //层级
      radius: ['30%', '40%'],
      avoidLabelOverlap: false,
      label: {
        show: false, // 鼠标移上去 圆环中间显示信息
        position: 'center',
        formatter: () => {
          return '{legend|Echarts}\r\n{name|可视化插件}';
        },
        rich: {
          legend: {
            fontSize: 25,
            color: '#00DD00',
            align: 'right'
          },
          name: {
            fontSize: 12,
            color: '#666'
          }
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {
          name: '一级',
          value: '100'
        },
        {
          name: '二级',
          value: '200'
        },
        {
          name: '三级',
          value: '300'
        },
        {
          name: '四级',
          value: '400'
        }
      ]
    },
    {
      type: 'pie',
      zlevel: 0,
      silent: true,
      radius: ['0%', '50%'],
      color: '#FFB3FF',
      label: {
        show: true,
        position: 'center',
        formatter: () => {
          return '{legend|Echarts}\r\n{name|可视化插件}';
        },

        rich: {
          legend: {
            fontSize: 30,
            color: 'white',
            align: 'right'
          },
          name: {
            fontSize: 12,
            color: '#FF0000'
          }
        }
      },
      data: [1]
    },
    {
      type: 'pie',
      zlevel: 1,
      silent: true,
      radius: ['45%', '50%'],
      color: 'rgba(45, 46, 131, 0.28)',
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: {
          x: 1,
          y: 0,
          x2: 1,
          y2: 1,
          type: 'linear',
          global: false,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(34, 102, 232, 1)'
            },
            {
              offset: 1,
              color: 'rgba(34, 102, 232, 0.28)'
            }
          ]
        }
      },
      data: [1]
    },
    {
      type: 'pie',
      zlevel: 2,
      silent: true,
      radius: ['55%', '62%'],
      color: 'rgba(45, 46, 131, 0.28)',
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      itemStyle: {
        color: {
          x: 1,
          y: 0,
          x2: 1,
          y2: 1,
          type: 'linear',
          global: false,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(50, 229, 255, 1)'
            },
            {
              offset: 1,
              color: 'rgba(50, 229, 255, 0.28)'
            }
          ]
        }
      },
      data: [1]
    }
  ]
};

如果需要自定义右侧 legend 的颜色，如下例：
echarts 环形图

 /**
   *  可在 rich 里面，自定义富文本样式
   **/
   
  legend: {
    type: 'scroll',
    orient: 'vertical',
    right: '8%',
    top: 'center',
    bottom: '20%',
    icon: 'circle',
    itemWidth: 8,
    itemHeight: 8,
    align: 'left',
    formatter: (val) => {
      if (val == '一级') {
        return `{a| Echarts}\n{b| 可视化组件 | 组件} \n `;
      } else if (val == '二级') {
        return `{c| Echarts}\n{d| 可视化组件 | 组件} \n `;
      } else if (val == '三级') {
        return `{e| Echarts}\n{f| 可视化组件 | 组件} \n `;
      }
      return ` Echarts \n\n  ${val} | 可视化组件 | 组件`;
    },
    textStyle: {
      height: 18,
      color: '#FF4500',
      rich: {
        a: {
          color: '#B8860B',
          lineHeight: 18
        },
        b: {
          color: '#3CB371',
          lineHeight: 18
        },
        c: {
          color: '#1E90FF',
          lineHeight: 18
        },
        d: {
          color: '#FFD700',
          lineHeight: 18
        },
        e: {
          color: '#FF1493',
          lineHeight: 18
        },
        f: {
          color: '#8A2BE2',
          lineHeight: 18
        }
      }
    },
    data: ['一级', '二级', '三级', '四级']
  },

如果需要自定义 legend 位置，如下例：

echarts 环形图

  legend: [
    {
      type: 'scroll',
      orient: 'horizontal',
      left: '10%',
      top: '50%',
      bottom: '20%',
      icon: 'circle',
      itemGap: 40,
      itemWidth: 8,
      itemHeight: 8,
      align: 'left',
      formatter: (val) => {
        return `{a| Echarts}\n{b|${val} 可视化组件 | 组件} \n `;
      },
      textStyle: {
        height: 18,
        color: '#32E5FF',
        rich: {
          a: {
            color: '#B8860B',
            lineHeight: 18
          },
          b: {
            color: '#3CB371',
            lineHeight: 18
          }
        }
      },
      data: ['一级']
    },
    {
      type: 'scroll',
      orient: 'horizontal',
      right: '10%',
      top: '50%',
      bottom: '20%',
      icon: 'circle',
      itemGap: 40,
      itemWidth: 8,
      itemHeight: 8,
      align: 'left',
      formatter: (val) => {
        return `{a| Echarts}\n{b|${val} 可视化组件 | 组件} \n `;
      },
      textStyle: {
        height: 18,
        color: '#32E5FF',
        rich: {
          a: {
            color: '#1E90FF',
            lineHeight: 18
          },
          b: {
            color: '#FFD700',
            lineHeight: 18
          }
        }
      },
      data: ['二级']
    },
    {
      type: 'scroll',
      orient: 'horizontal',
      left: '38%',
      bottom: '10%',
      icon: 'circle',
      itemGap: 40,
      itemWidth: 8,
      itemHeight: 8,
      align: 'left',
      formatter: (val) => {
        return `{1| Echarts}\n{2|${val} 可视化组件 | 组件} \n `;
      },
      textStyle: {
        height: 18,
        color: '#32E5FF',
        rich: {
          1: {
            color: '#FF1493',
            lineHeight: 18
          },
          2: {
            color: '#8A2BE2',
            lineHeight: 18
          }
        }
      },
      data: ['三级']
    },
    {
      type: 'scroll',
      orient: 'horizontal',
      right: '33%',
      bottom: '10%',
      icon: 'circle',
      itemGap: 40,
      itemWidth: 8,
      itemHeight: 8,
      align: 'left',
      formatter: (val) => {
        return `{3| Echarts}\n{4|${val} 可视化组件 | 组件} \n `;
      },
      textStyle: {
        height: 18,
        color: '#32E5FF',
        rich: {
          3: {
            color: '#7FFFD4',
            lineHeight: 18
          },
          4: {
            color: '#FF4500',
            lineHeight: 18
          }
        }
      },
      data: ['四级']
    }
  ],

如果需要自定义 legend icon 和添加边框，如下例：
在这里插入图片描述
小火苗 icon ：

var iconRQ ='image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACZUlEQVRYR7WX300bQRDGfyPBc0gFMRWQVBBb8j2TDoAKAhUEVxCoAFJB4PlO4lxBnApiKgg829JEuz7b92f3dm9F7sWStTPzzezM980KCZ9OGSOcsWImJcsEFzsTSTHWMSMO+WNtlWspmKX4MTZJAGzcDK0FXQAXkmN+B31vBcBU4gVhMhREEgDN+Aj8cqS6YMVESl5iy5AGYMolwndPkB+Sc/5/AWT2rk+8QVYcx07H4ApUI/jUm6FyJQU3MVUYBEDHHHGICW56oO+bS8747QFk3ANnEY6XknMccS6eBzQ+uI0reZzv4BXYsh9wh/AlJqOKHZ+lYKQZNygqBVc+214A1bzfRdx52/8c7HUZW/PdS86FC4QXgO12+IlwFJ35/qARqFHLzlC1AdX4nAA0s0SyRZ8Q32vyqU3VHQC27MpTYub9YJVSCib1Q10AU5YIH4JpK88ID8DX4Nn6AWUiBeX2rwYA7ef4vRvlkTXnHFhN+DYIADS0og0gJvudg8ReaZDUDkBFs38D2TTQNzajIWVY8X4r2XsAmz3PLzLKK2tGba3XkDK6gNX6YAgAp8JVU1MivIsuQhKAWtnagYb2Ql0n4npAeZWinxEHgPgt+V7Om1Pgv88oedUpDwingatoUHIbgJeCY+Q1OBWORm4C2EjvwsOEHR53Nnj/VHQEyacF3a5WZlJwHep09VO5c1v2qaERpDaIYB94r6Cibtd7wb8PbN5/Rr8/77IObLueSbiVnEtf5cIr2WY3MA5O7PNrbXd+58unVf559XDdKd+gjchBNmYVty8eV0ZV9gaoCWhWsKiH6j/NPeohS8oR6gAAAABJRU5ErkJggg==';

  legend: {
    type: 'scroll',
    orient: 'vertical',
    right: '2%',
    top: 'center',
    bottom: '20%',
    icon: iconRQ,
    itemWidth: 18,
    itemHeight: 18,
    align: 'left',
    formatter: (val) => {
      if (val == '一级') {
        return `{f|}   Echarts  {b|${val}可视化组件}`;
      } else if (val == '二级') {
        return `{g|}   Echarts  {c|${val}可视化组件}`;
      }  else if (val == '三级') {
        return `{h|}   Echarts  {c|${val}可视化组件}`;
      } else {
        return `{j|}   Echarts ${val} | 可视化组件`;
      }
    },
    textStyle: {
      height: 18,
      color: '#FF4500',
      borderWidth: 1,
      width: 200,
      padding: [6, 0, 6, 36],
      borderColor: '#3EE6FF',
      rich: {
        a: {
          color: '#AECBE2',
          lineHeight: 18,
          height: 18
        },
        b: {
          color: '#3958D8',
          lineHeight: 18,
          height: 18
        },
        c: {
          color: '#4BADDB',
          lineHeight: 18,
          height: 18
        },
        d: {
          color: '#DBE44C',
          lineHeight: 18,
          height: 18
        },
        f: {
          color: '#3958D8',
          lineHeight: 18,
          backgroundColor: '#3958D8',
          borderRadius: 5,
          width: 10,
          height: 10
        },
        g: {
          color: '#e54d42',
          lineHeight: 18,
          backgroundColor: '#e54d42',
          borderRadius: 1,
          width: 10,
          height: 10
        },
        h: {
          color: '#e54d42',
          lineHeight: 18,
          backgroundColor: 'blue',
          borderRadius: 1,
          width: 20,
          height: 10
        },
        j: {
          color: '#e54d42',
          lineHeight: 18,
          backgroundColor: 'green',
          borderRadius: 1,
          width: 10,
          height: 20
        }
      }
    },
    data: ['一级', '二级', '三级', '四级']
  },

二、k 线图

文章链接：https://blog.csdn.net/aibujin/article/details/124797924?spm=1001.2014.3001.5501

三、折线图

echarts 折线图，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124802512?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130157140?spm=1001.2014.3001.5501

文章链接：https://blog.csdn.net/aibujin/article/details/130223130?spm=1001.2014.3001.5501

四、横向柱状图

echarts 横向柱状图，坐标轴隐藏，网格线颜色渐变，网格默认背景，柱状图边框宽度/颜色，数据渐变，刻度线隐藏等；

文章链接： https://blog.csdn.net/aibujin/article/details/124802889?spm=1001.2014.3001.5501

五、折线图 + 柱状图

echarts 折线图 + 柱状图，左右两侧y轴线，横纵坐标轴线颜色、文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124803493?spm=1001.2014.3001.5501

六、3D 柱状图

echarts 3D 柱状图，多个柱状图叠加，y轴内刻度线、隐藏横坐标，文字颜色，网格线，坐标轴两侧留白，数据渐变，刻度线等；

文章链接： https://blog.csdn.net/aibujin/article/details/124879825?spm=1001.2014.3001.5501

七、工程项目可视化

echarts 工程项目可视化，依据x轴时间坐标轴，叠加展示不同阶段的项目节点，y轴展示项目阶段名、文字颜色，网格线，坐标轴两侧留白、背景色等；

文章链接： https://blog.csdn.net/aibujin/article/details/130237643?spm=1001.2014.3001.5501

八、雷达图

echarts 雷达图，自定义指示器名称，线条样式、区域填充样式、折线拐点标志、自定义名称样式、坐标轴分隔线、坐标轴两侧留白、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130266382?spm=1001.2014.3001.5501

九、象形柱图

echarts 象形柱图，隐藏横纵坐标轴、网格线，坐标轴两侧留白，自定义矢量图，文字提示框、图形类型、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130289101?spm=1001.2014.3001.5501

十、环形占比图

echarts 环形占比图，环形图、仪表盘、刻度线，自定义提示框、颜色渐变、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130265744?spm=1001.2014.3001.5501

十一、圆环动画

echarts 圆环动画，饼图、环形图、图表动画、网格线，颜色渐变，图行矢量，文字提示框、图表层级、背景色等；

文章链接：https://blog.csdn.net/aibujin/article/details/130288849?spm=1001.2014.3001.5501

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

vue+element ui实现好看的登录界面

ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

ViewDesign

所有评论(0)

查看更多评论

aibujin

@aibujin

已为社区贡献4条内容