02 【eCharts样式定制系列】玫瑰图、环形饼图、漏斗图自定义各项数据的颜色

描述

在目前的项目中，根据UI设计稿需要实现一个带有大屏的系统首页，在此首页上要添加地图和一些eCharts图表。但是根据UI设计稿，如果要达到美观的目的，需要对eCharts进行定制。此次需要定制的图表依次是玫瑰图、环形图、漏斗图。

我们先来看一下UI设计稿中的图表：

其次再看一下eCharts官网默认的图表：

通过和官网的图表demo作对比，我们需要对这三个图表定义的内容其实仅仅是各项数据的颜色配置，其余的配置我们可以通过简单的初始化配置图表即可实现。

目前使用的eCharts是最新版的4.5.0版本。

操作步骤

在eCharts官网的参考文档中，配置颜色选项其实提供了两种方法：

1、配置各项数据的itemStyle；

2、配置visualMap属性。

由于visualMap属性暂时没有搞懂，并且实际项目中实例化出来的三个图表，由于各项数据之间的差值特别大，所以只需要配置itemStyle即可实现想要的效果，所以在此项目中采用了第一种方法。

itemStyle属性配置其实很简单，在我们的配置数据中，给每一个数据增加itemStyle属性即可，代码如下：

data: [{value: 182466.12,name: '旱地',itemStyle: {color: '#6648FE',},}, {value: 532.49,name: '湿地',    // 此项的值和其余项相比差值太大，所以在前端页面渲染的时候根本看不到，所以可以不用配置颜色样式}, {value: 31234.11,name: '种植园地',itemStyle: {color: '#2D99FE',},}, {value: 55147.28,name: '林地',itemStyle: {color: '#4346D3',},}]

最后实现的效果如下图所示：

总结

以上定制的过程其实都是查阅eCharts官网的API文档实现的，所以在每类图表定制的时候，查阅API文档是最有效、准确的方法途径，参考地址如下：https://www.echartsjs.com/zh/tutorial.html#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F

02 【eCharts样式定制系列】玫瑰图、环形饼图、漏斗图自定义各项数据的颜色相关推荐

用户数据销售额分析动态大屏看板+大屏数据可视化图表组件（折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图）+智能web端高保真大数据动态可视化大屏看板+中国动态地图+智慧电商实时动态数据大屏看板
作品内容:用户数据销售额分析动态大屏看板+大屏数据可视化图表组件(折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图)+web端高保真大数据动态可视化大屏看板+中国动态地图+电商实时动态数据大屏看板 ...
03 【eCharts样式定制系列】雷达图自定义面积覆盖颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
04 【eCharts样式定制系列】矩形树图自定义颜色
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.此次需要定制的 ...
01 【eCharts样式定制系列】柱状图修改柱状颜色、柱状形状等
描述在目前的项目中,根据UI设计稿需要实现一个带有大屏的系统首页,在此首页上要添加地图和一些eCharts图表.但是根据UI设计稿,如果要达到美观的目的,需要对eCharts进行定制.接下来我们先对 ...
05 【eCharts样式定制系列】自定义地图
描述项目的UI设计稿中,大屏展示模块有地图模块,原本项目使用的是我们ArcGIS JS API初始化后的一个地图服务图层,不过为了美观考虑,最后决定大屏模块的地图使用eCharts来自定义,UI设计 ...
Echarts数据可视化第4章 Echarts可视化图 4.7 漏斗图
Echarts数据可视化文章目录 Echarts数据可视化第4章 Echarts可视化图 4.7 漏斗图 Echarts数据可视化:入门.实战与进阶第4章 Echarts可视化图 4.7 漏斗图 ...
python画漏斗图_python绘制漏斗图步骤详解
pyecharts中的Funnel函数可以绘制漏斗图,自动根据数据大小生成由大到小自上而下排列的一个漏斗样的图形. 1.导入Funnel模块. from pyecharts import Funnel ...
[博客迁移]探索Windows Azure 监控和自动伸缩系列3 - 启用Azure监控扩展收集自定义监控数据...
上一篇我们介绍了获取Azure的监控指标和监控数据: http://www.cnblogs.com/teld/p/5113376.html 本篇我们继续:监控虚拟机的自定义性能计数器. 随着我们应用规 ...
echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
目录 1.官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比碎碎念: UI效果图是这样的看到之后我一脸懵,按照常规阶梯思路,我又开始了度娘之旅. ...

02 【eCharts样式定制系列】玫瑰图、环形饼图、漏斗图自定义各项数据的颜色

描述

操作步骤

总结

02 【eCharts样式定制系列】玫瑰图、环形饼图、漏斗图自定义各项数据的颜色相关推荐

最新文章

热门文章