描述

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

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

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


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

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

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

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

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

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

 通过和官网的图表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',
},
}]






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

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

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

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


 总结

以上定制的过程其实都是查阅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