利用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多段圆环图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue中使用echarts制作圆环图的实例代码

    vue使用echarts制作圆环图,代码如下所示: <div id="main"></div> <script type="text/ecmascript-6"> export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts: '', totalIncome:'', opinionD

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

    目录 前言 原型示例 完美实现 效果图 总结 前言 开发某款app时,产品给的UI原型图上有个分为三段的圆环图,本来以为使用echarts应该会很好做的,主要考虑移动端echarts的兼容问题就好了,但是实际操作后发现还是没法做到完美的还原,最终找了很多类似的案例,加上自己的一些调整实现了. 原型示例 第一眼看的时候以为用echarts里的饼图做一些修改可以达到,但是效果都不太好,首先是每段弧段的边缘有一个圆角的处理,其次是弧度的宽度是不同,灰色最细,红色次之,绿色是最宽的. 第二时间又看到了一

  • Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

    目录 如何运用vue+echarts前后端交互实现动态饼图 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 如何运用vue+echarts前后端交互实现动态饼图 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动

  • Springboot运用vue+echarts前后端交互实现动态圆环图

    目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa

  • 如何利用echarts画雷达图和折柱混合

    目录 导语 雷达图 效果 折柱图 效果 总结 导语 通常在根据设计图写echarts的时候,很多效果是官方实例里没有的,我在代码里加上了一些常用的效果,并做了注释. 雷达图 var option = { radar: [{ //数据名称 indicator: [{ text: 'AIS未登记' }, { text: '巡逻发现' }, { text: '群众举报' }, { text: '其他' }, { text: '雷达发现' } ], center: ['50%', '50%'], rad

  • Python利用matplotlib绘制圆环图(环形图)的实战案例

    目录 一.概念介绍 二.数据展示 三.图像绘制 四.参数解释 (1) wedgeprops是我们绘图时的参数字典. (2) startangle是第一个数据起画点. (3) plt.text (4) 可以绘制如示例图一样的colorbar,或者legend吗? 总结 一.概念介绍 圆环图(Donut Chart),又称为环形图,甜甜圈图.它从饼图变形而来,单环的作用上与饼图相似,用于展示定性数据中小类占大类的比例关系. Q: 那既然都有饼图了,为什么还要圆环图呢? ① 从空间利用效果上,饼图的t

  • Layer+Echarts构建弹出层折线图的方法

    layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验. 在中国可视化生态系统中,ECharts 通过提供方便丰富的可视化图表,极大缩短了用户与数据的距离.个人认为是最好用的可用来生成图表的插件. 现在使用Layer和Echarts构建弹出层折线图. 下载好所需要用到的工具包,Echarts下载为echarts.min.js,Layer在layer官网下载之后将layer文件夹放到项目之中. 在HTML文件中引入

  • 利用Python的folium包绘制城市道路图的实现示例

    写在前面 很长一段时间内,我都在研究在线地图的开发者文档,百度地图和高德地图的开发者中心提供了丰富的在线地图服务,虽然有一定的权限限制,但不得不说,还是给我的科研工作提供了特别方便的工具,在博客前面我先放上这两个在线地图开放平台的web API的地址链接: 百度地图开放平台 高德地图开放平台 基于这两个平台,博主进行了一系列的开发研究工作,本文介绍其中一项技术,如何用folium包绘制城市道路图,当然,也可绘制非城市道路图,只要提供正确的路名就行了. 开发工具: Python3.7 Spyder

  • vue2 利用echarts 单独绘制省份的步骤

    第一步:先引入所需的第三方模块 import echarts from "echarts"; // 引入所需要的echarts模块 import "echarts/map/js/province/shanxi"; // 引入省份的js文件 import "echarts/map/json/province/shanxi.json"; // 引入省份的json文件 第二步:开始绘制 // 基于准备好的dom,初始化echarts实例 var myC

  • Flask框架利用Echarts实现绘制图形

    目录 实现绘制饼状图 实现绘制柱状图 实现绘制折线图 echarts是百度推出的一款开源的基于JavaScript的可视化图表库,该开发库目前发展非常不错,且支持各类图形的绘制可定制程度高,Echarts绘图库同样可以与Flask结合,前台使用echart绘图库进行图形的生成与展示,后台则是Flask通过render_template方法返回一串JSON数据集,前台收到后将其应用到绘图库上,实现动态展示Web服务日志状态功能. 如下演示案例中,将分别展示运用该绘图库如何前后端交互绘制(饼状图,柱

随机推荐