美文网首页
ngx-echarts做出炫酷定制化图表

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

作者: mm_tang | 来源:发表于2022-05-02 13:22 被阅读0次

    前言

    在使用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这个方法,是用来获取这个图表的实例,方便后续对图标赋值,清空,监听缩放等等操作
     <div echarts [options]="options" class="line" (chartInit)="onChartInit($event)"></div>
    

    如何做渐变的图表

    想实现的如下所示的图表:

    屏幕快照 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做出炫酷定制化图表

          本文链接:https://www.haomeiwen.com/subject/iqtvyrtx.html