前言
在使用echarts的时候，大家一定遇到过，UI小伙伴设计出的更具有自己项目特色的图表，比如渐变的图表、以及具有特殊样式的滚动条、炫酷的图表背景图等等，今天就结合实际需求来看一下具体的操作~
使用的库版本如下
"@angular/cli": "~11.1.4""ngx-echarts": "^6.0.1"
这个版本与angular的版本是息息相关的，具体请参照官网"echarts": "^5.3.2"
echarts5以后的版本新增了许多炫酷的样式以及操作，比如图表圆角等,详细option配置请参照官网
项目中引入ngx-echarts
大家应该都清楚ngx-echarts是针对Angular对echarts的封装，让其在Angular中的使用更加的方便，适配度更高，当然，在引入这个库的时候也是很简单的，具体如下：
npm install echarts -S
npm install ngx-echarts -S
// 在你需要使用的模块中导入ngx-echarts
import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
imports: [
NgxEchartsModule.forRoot({
echarts: () => import('echarts')}),
],
providers: []
})
// 在组件中使用
// 只要给[options]属性赋不同的对象值，就可以显示不同的图表啦
// onChartInit这个方法，是用来获取这个图表的实例，方便后续对图标赋值，清空，监听缩放等等操作
如何做渐变的图表
想实现的如下所示的图表:
屏幕快照 2022-05-02 12.24.47.png
其实柱状图的渐变，很简单，只需要更改itemStyle的属性就可以，具体代码如下：
// 因为更改渐变颜色会使用到graphic，所以需要在文档中提前引入
import { graphic } from 'echarts';
// 在options的对象中，我们找到series对象，并更改itemStyle的属性即可
series: [
{
name: '数量',
type: 'bar',
showBackground: false,
itemStyle: {
color: '#52A8FF',
normal: {
// 这里就是实现渐变的重点代码了，当然你也可以通过更多的参数实现不同段的渐变
color: new graphic.LinearGradient(
0, 0, 1, 0,
[
{offset: 0, color: '#BFE7FF'}, // 开始颜色
{offset: 1, color: '#009FFF'} // 结束颜色
]
)
},
},
barMaxWidth: 25,
label: { show: true, position: 'insideRight', offset: [-5, 2], color: '#fff' },
data: [30, 18, 10, 35, 21, 11, 9, 30, 18, 10],
},
],
如何自定义图表的滚动条
如上述所示的滚动条是echarts5默认的滚动条，假如我们希望将它的滚动条更改成我们想要的样子该怎么做呢~ 我们先来看一下之前默认滚动的样式组成：
屏幕快照 2022-05-02 12.32.54.png
那当我们做一些定制化的滚动条时，也应该从这几个组成方面着手~现在我们希望将滚动条改成如下所示的样子：
屏幕快照 2022-05-02 12.50.33.png
// echarts中的滚动条样式，只要是通过options中的dataZoom这个对象进行调整的
dataZoom: [
{
type: 'slider',
show: true,
yAxisIndex: [0], // 因为这里设置的是纵向滚动条所以要设置这个属性
right: 20, // 调整纵向滚动条的位置
start: 10, // 中间滑块范围的起始值
end: 30, // 中间滑块范围的结束值
width: 8, // 设置滚动条的宽度
backgroundColor: '#fff', //设置滚动条容器的背景色以及边框
borderColor: '#fff',
dataBackground:{ // 将滚动条容器的之前的背景色通过opacity进行隐藏掉
lineStyle: {
opacity: 0,
},
areaStyle: {
opacity: 0
}
},
fillerColor: '#ccc', // 设置中间滑块的填充颜色
moveHandleSize: 0, // 将中间移动滑块上可以拖拽的icon移除掉
// 设置滑块两侧缩放手柄的icon,也可以使用image
handleIcon: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z',// 画一个圆形
}
],
如何使用炫酷背景图
假如我想实现如下所示的圆环图，中间的数据的背景图该如何实现呢~
屏幕快照 2022-05-02 13.03.51.png
其实我们可以借助graphic是原生图形元素组件。可以支持的多种图形元素来实现
// 只需要在options中的对象中添加这个graphic对象即可
graphic: {
elements: [
{
type: 'image',
z: 3,
style: {
image: '/assets/test-bg.png', // 从本地获取背景图片
width: 100, // 设置图片的大小
height: 100,
},
left: 'center', // 这个背景图片的所在画布中的位置
top: 'center',
},
],
},
可能也有小伙伴会好奇这个圆环的圆角是怎么画出来的呢~ 其实这个圆角就用到的echarts中的新特性borderRadius具体代码如下所示：
// 主要是通过设置options中series的属性值来更改圆环的演示和显示
series: [
{
type: 'pie',
hoverAnimation: true,
hoverOffset: 15,
startAngle: 180, // 起始角度
clockwise: false, // 是否顺时针
radius: ['70%', '60%'], // 设置圆环的大小，粗细
center: ['50%', '50%'], // 圆环位置画布的位置
avoidLabelOverlap: false,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [
{
value: 55,
name: '小组A',
},
{
value: 29,
name: '小组B',
},
],
itemStyle: {
borderRadius: 10, // 设置圆环中的圆角大小
},
},
],
总结
echart中的api是非常丰富了，在遇到定制化图表时，我们可以先去官网上看看，有没有提供具体的api进行操作和设置~