ngx-echarts做出炫酷定制化图表

前言

在使用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进行操作和设置~

你可能感兴趣的:(ngx-echarts做出炫酷定制化图表)