返回顶部
首页 > 资讯 > 前端开发 > JavaScript >利用Echarts如何实现多段圆环图
  • 134
分享到

利用Echarts如何实现多段圆环图

2024-04-02 19:04:59 134人浏览 安东尼
摘要

目录前言原型示例完美实现效果图总结前言 开发某款app时,产品给的UI原型图上有个分为三段的圆环图,本来以为使用echarts应该会很好做的,主要考虑移动端echarts的兼容问题就

前言

开发某款app时,产品给的UI原型图上有个分为三段的圆环图,本来以为使用echarts应该会很好做的,主要考虑移动端echarts的兼容问题就好了,但是实际操作后发现还是没法做到完美的还原,最终找了很多类似的案例,加上自己的一些调整实现了.

原型示例

第一眼看的时候以为用echarts里的饼图做一些修改可以达到,但是效果都不太好,首先是每段弧段的边缘有一个圆角的处理,其次是弧度的宽度是不同,灰色最细,红色次之,绿色是最宽的.

第二时间又看到了一些圆环进度条的示例

本来以为这种图应该可以实现了,但去看了示例的代码发现这种图是echarts里的pie组件的一个叠加,一般叠加一次,有两个区域效果还算可以,但是3个区域的效果在不设置圆弧的宽度时还算可以接受,但是设置了宽度后总会有一些叠加后超出不太美观的问题.

完美实现

最终在玫瑰图的网站上找到一个比较复杂的实现,通过修改各项配置基本完美的使用ehcarts实现了这个图形. 首先是echarts的一个option的配置代码,为了方便将series与option做了一个分离

const colorDataHandle = (data, total, width = 375) => {
    let num = 0
    let option = {
        angleAxis: {
            axisLine: {
		show: false,
            },
            axisLabel: {
		show: false,
            },
            splitLine: {
		show: false,
            },
            axisTick: {
		show: false,
            },
            min: 'dataMin',
            max: 'dataMax',
            startAngle: 135,
            },
            radiusAxis: {
                type: 'cateGory',
                axisLine: {
                    show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
        },
        polar: {
            radius: '95%'
        },
        series: []
      }
      // option是对传入的数据的一个处理
      const options = data.map((item, index) => {
        num += item
        const a = {
          type: 'bar',
          data: [0, 0, 0, num],
          coordinateSystem: 'polar',
          z: 9999 - index,
          roundCap: true,
          color: colors[index],
          barGap: '-100%',
          // barWidth: '30%',
          itemStyle: {
            // 控制弧的宽,弧的宽的控制并没有做太多的情况判断,简单的区分了一下
            borderWidth: index === 0 ? 4 : index === 1 ? 2 : 0,
            // shadowBlur: 5,
            // color: 'transparent',
            borderColor: colors[index],
            shadowColor: colors[index],
          },
        }
        return a
      })
            option.series = options
      return option
}

然后是对3种颜色区域的一个处理

const colors = [
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: '#1DBC3F', // 0% 处的颜色
      },
      {
        offset: 1,
        color: '#1DBC3F', // 100% 处的颜色
      },
    ],
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: '#CB3939', // 0% 处的颜色
      },
      {
        offset: 1,
        color: '#CB3939', // 100% 处的颜色
      },
    ],
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: '#C0C0C0', // 0% 处的颜色
      },
      {
        offset: 1,
        color: '#C0C0C0', // 100% 处的颜色
      },
    ],
  },
];

这里是灵活使用了echarts type为linear的组件,具体的一个配置项是怎么实现我并没有深入探究.

效果图

最终实现的一个效果图在真机上的展示

既保证了每段弧的首尾的圆角的问题,也实现了每段弧宽的增加

总结

echarts这个库确实博大进深,同时对一些没有做过的需求的评估需要谨慎再谨慎,我看到这个图形时觉得用echarts应该就ok了,但实际在开发的过程中,坑还是很多,同样机会也在不经意中就出现了,机会还是留给有准备的人的,如果想着图形太复杂随随便便用个环形图就去实现可能在页面的呈现上也没有这么好的效果了.

到此这篇关于利用Echarts如何实现多段圆环图的文章就介绍到这了,更多相关Echarts多段圆环图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 利用Echarts如何实现多段圆环图

本文链接: https://lsjlt.com/news/141186.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 利用Echarts如何实现多段圆环图
    目录前言原型示例完美实现效果图总结前言 开发某款app时,产品给的UI原型图上有个分为三段的圆环图,本来以为使用echarts应该会很好做的,主要考虑移动端echarts的兼容问题就...
    99+
    2024-04-02
  • 怎么用Echarts实现多段圆环图
    这篇文章主要介绍“怎么用Echarts实现多段圆环图”,在日常操作中,相信很多人在怎么用Echarts实现多段圆环图问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用Echarts实现多段圆环图”的疑惑有所...
    99+
    2023-06-29
  • Springboot运用vue+echarts前后端交互实现动态圆环图
    目录前言一、环境配置1.1 安装acharts1.2 全局引用二、圆环图前端实现2.1 先在vue页面添加渲染盒子2.2 前端逻辑实现部分2.3 展示(可按自己需求更改前端样式)三、...
    99+
    2024-04-02
  • vue+echarts如何实现多条折线图
    小编给大家分享一下vue+echarts如何实现多条折线图,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下数据未使用json格式,直接写在页面大致效果页面代码:<template> &nbs...
    99+
    2023-06-29
  • Python利用matplotlib绘制圆环图(环形图)的实战案例
    目录一、概念介绍二、数据展示三、图像绘制四、参数解释(1) wedgeprops是我们绘图时的参数字典。(2) startangle是第一个数据起画点。(3) plt.text(4)...
    99+
    2024-04-02
  • Vue Echarts如何实现多功能图表绘制
    这篇文章主要介绍“Vue Echarts如何实现多功能图表绘制”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue Echarts如何实现多功能图表绘制”文章能帮助大家解决问题。...
    99+
    2023-07-05
  • Flask框架利用Echarts实现绘制图形
    目录实现绘制饼状图实现绘制柱状图实现绘制折线图echarts是百度推出的一款开源的基于JavaScript的可视化图表库,该开发库目前发展非常不错,且支持各类图形的绘制可定制程度高,...
    99+
    2024-04-02
  • vue中怎么使用echarts和echarts-gl实现3D饼图环形饼图
    今天小编给大家分享一下vue中怎么使用echarts和echarts-gl实现3D饼图环形饼图的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一...
    99+
    2023-07-05
  • python如何实现彩色圆环
    本篇内容介绍了“python如何实现彩色圆环”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!彩色圆环更漂亮A.课程内容通过绘制彩色的圆环来学习...
    99+
    2023-07-02
  • jQuery插件echarts如何实现循环生成图效果
    这篇文章给大家分享的是有关jQuery插件echarts如何实现循环生成图效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1、问题背景:利用for循环生产多个气泡图,并且每个气...
    99+
    2024-04-02
  • jQuery插件echarts如何实现多折线图效果
    这篇文章主要介绍jQuery插件echarts如何实现多折线图效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:1、问题背景:设计一个折线图,折线图展示苹果、香蕉的销售量2...
    99+
    2024-04-02
  • echarts如何实现动态曲线图(多条曲线)
    目录echarts动态曲线图(多条曲线)HTML部分CSS部分JS部分echarts动态曲线图(多条曲线) ECharts是一个由百度开发的开源数据可视化工具,能够提供直观,生动,可...
    99+
    2022-11-13
    echarts 曲线图 echarts动态曲线图 echarts多条曲线
  • React Native中如何利用echarts画图表
    这篇文章主要讲解了“React Native中如何利用echarts画图表”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“React Native中如何利用echarts画图表”吧!小提示如果...
    99+
    2023-07-05
  • C++利用Opencv实现多个圆形检测
    主要是利用霍夫圆检测、面积筛选等完成多个圆形检测,具体代码及结果如下。 第一部分是头文件(common.h): #pragma once #include<opencv2/op...
    99+
    2022-11-13
    C++ Opencv圆形检测 C++ 原型检测
  • Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)
    目录如何运用vue+echarts前后端交互实现动态饼图前言一、环境配置1.1 安装acharts1.2 全局引用二、圆环图前端实现 2.1 先在vue页面添加渲染盒子2....
    99+
    2024-04-02
  • 如何在Android中利用Glide实现一个图片圆角功能
    如何在Android中利用Glide实现一个图片圆角功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、简介:介绍两种使用 BitmapTransformation 来实...
    99+
    2023-05-31
    glide android roi
  • 如何利用php接口和ECharts实现数据可视化统计图
    如何利用PHP接口和ECharts实现数据可视化统计图简介在网页应用程序中,数据可视化统计图对于展示和分析大量数据非常重要。本篇文章将介绍如何利用PHP接口和ECharts库来实现数据可视化统计图,并为读者提供具体的代码示例。前提条件在开始...
    99+
    2023-12-17
    数据可视化 echarts PHP接口
  • 如何利用CSS3实现圆角的outline效果
    这篇文章主要介绍“如何利用CSS3实现圆角的outline效果”,在日常操作中,相信很多人在如何利用CSS3实现圆角的outline效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2024-04-02
  • 利用Echarts实现图例显示百分比效果
    目录效果图主要代码全部代码echarts图例显示百分比 效果图 主要代码 全部代码 secondChart = () => { //datas的数据是接口拿到的数据...
    99+
    2024-04-02
  • 如何使用纯CSS实现圆形图像?
    小编给大家分享一下如何使用纯CSS实现圆形图像?,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   SS可以实现网页中的很多效...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作