Echarts特殊用法总结

最近做了一个微信公众号项目,使用Echarts绘制降雨量曲线、水库水位及库容曲线、大坝断面监测等图表。通过查阅官方文档及示例、度娘,与Echarts的距离更近了一步。
总结一下,不能直接在官网上找到答案的用法,有以下几处:

  1. x轴为value类型的用法
  2. 双Y轴的用法
  3. 自定义图形的绘制,包括line、text、polygon等的组合
  4. 贝塞尔曲线(待定)

先看下2个页面
在这里插入图片描述
在这里插入图片描述

x轴为value类型的用法

在绘制大坝剖面轮廓的时候,需要根据实际图纸大坝的宽度高度,以及各关键点位的坐标做数据的预处理。
实际图纸
大坝高度宽度及各关键点位坐标计算完成后,写入配置文件。官网示例中多是category类型的,value的没找到,网上搜索了一下,可以用二维数组作为series的data

 series : [
            {
                name:"大坝轮廓",
                type:'line',
                symbol: "none",
                data: [
                    [damX[0],damY[0]],
                    [damX[1],damY[1]],
                    [damX[2],damY[2]],
                    [damX[3],damY[3]],
                    [damX[4],damY[4]],
                    [damX[5],damY[5]],
                    [damX[6],damY[6]],
                    [damX[7],damY[7]],
                    [damX[8],damY[8]]
                ],
                areaStyle: {
                    normal: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(245,238,188,0.7)',
                            }, {
                                offset: 1, color: 'rgba(161,152,37,0.7)',
                            }],
                            globalCoord: false // 缺省为 false
                        },
                    }
                },
                lineStyle: {
                    color: "rgb(9,9,9)"
                }
            }
            ]

此处,我做了一点渐变色的填充。填充示例可以查阅官网series-line.areaStyle. color 属性。

双Y轴的用法

在水库水位库容页面,需要用到双Y轴同时显示水位高度与库容大小。双Y轴的实现其实比较简单,主要是series里的yAxisIndex属性设置。

        {
            name:chartdata.line_text[1],
            type:'line',
            data:chartdata.capatityList,
            showAllSymbol: true,
            markPoint : {
                label:{
                    normal:{
                        textStyle:{
                            color:'#fff',
                            fontWeight:'bold'
                        }
                    }
                },
                data : chartdata.KRPoint
            },
            yAxisIndex:1
        }

数据变化较小,像一条停止的心脏线:D。分别加了markpoint标识出最大水位与最大库容。同时这也是用户最关注的点。

自定义图形的绘制,包括line、text、polygon等的组合

大坝断面监测图中,包括大坝轮廓、设计水位、实际水位、测压管轮廓,渗压几个部分的绘制。大坝轮廓绘制如上。
设计水位的绘制比较简单,就是一条线段。用的是虚线(不是实际的水位),给出markpoint来标识警示水位。需要确定的是2个点,起始点X=0,Y=设计水位。终点的x需要计算,计算方法是根据图纸中的数据(按三角形处理)x=((designFL - 13.3)*33.9/13.3),Y=设计水位。
实际水位刚开始我也按线段处理,后来发现画出来的图不太美观,做个填充更合适点,表示实际水位以下、测压管渗压部分,都是有水。
这里的填充,是类型为custom的填充,与大坝 轮廓中type=‘line’的填充方式不同。这里也包括了多边形的绘制。在官网上没看到多边形的代码示例,刚开始不知道shape怎么设置points以及如何写return。后面查阅参考了一个博客,https://blog.csdn.net/qq_20042935/article/details/89847775

        {
                name:"当前水位",
                type: "custom",
                renderItem: function (params, api) {
                    polyPoints.push(api.coord([api.value(0), api.value(1)]));
                    var start = api.coord([0, chartdata.waterLevel]);

                    return {
                        type: 'group',
                        children: [{
                            type: 'polygon',
                            shape: {
                                points: echarts.graphic.clipPointsByRect(polyPoints, {
                                    x: params.coordSys.x,
                                    y: params.coordSys.y,
                                    width: params.coordSys.width,
                                    height: params.coordSys.height
                                })
                            },
                            style: api.style({
                                fill: "rgb(37,183,239)",
                                stroke: 'transparent'
                            })
                        }, {
                            type: 'text',
                            style:{
                                text:chartdata.waterLevel+"m" ,    //水位数据标志
                                x:start[0]+ 10,
                                y:start[1]+10
                            }
                        }]
                    };
                },
                data:[
                    [0,13.3],
                    [((chartdata.waterLevel - 13.3)*33.9/13.3),chartdata.waterLevel],
                    [0,chartdata.waterLevel]
                ]
            },

data就是三角形的3个点的坐标。
这里的start点,实际也可以利用dataindex来计算。我直接写死了。在测压管轮廓的图像绘制中,我用到了params的属性dataindex,表示data数组中的下标,代码如下:

        {
            name:"测压管轮廓",
            type: "custom",
            renderItem: function (params, api) {
                // var categoryIndex = api.value(0);
                var start = api.coord([api.value(0), api.value(1)]);
                var end = api.coord([api.value(2), api.value(3)]);
                var height = api.size([0, 1])[1] * (api.value(3) - api.value(1));

                var rectShape = echarts.graphic.clipRectByRect({
                    x: start[0],
                    y: end[1],
                    width: end[0] - start[0],
                    height: height
                }, {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                });

                return {
                    type: 'group',
                    children: [{
                        type: 'rect',
                        shape: rectShape,
                        style: api.style({fill: 'transparent', stroke: 'black'})
                    }, {
                        type: 'line',
                        shape: {
                            x1:start[0],y1:end[1],x2:start[0] + 50,y2:end[1]
                        },
                        style: api.style({stroke: 'black'})
                    }, {
                        type: 'text',
                        style:{
                            text:api.value(3)+'m',
                            x:start[0] + 5,
                            y:end[1]-10
                        }
                    }, {
                        type: 'text',
                        style:{
                            text:pressureName[params.dataIndex],
                            x:start[0] - 25,
                            y:start[1]-10
                        }
                    }]
                };
            },
            encode: {
                x: [1, 3],      // 表示维度 3、1 映射到 x 轴。
                y: [2, 4]       // 表示维度 2、4 映射到 y 轴。
            },
            data: [
                [piezometer_fracture[0],piezometer_fracture[1],piezometer_fracture[2],piezometer_fracture[3]],
                [piezometer_fracture[4],piezometer_fracture[5],piezometer_fracture[6],piezometer_fracture[7]],
                [piezometer_fracture[8],piezometer_fracture[9],piezometer_fracture[10],piezometer_fracture[11]],
                [piezometer_fracture[12],piezometer_fracture[13],piezometer_fracture[14],piezometer_fracture[15]]
            ]
        },

测压管的名称如C11,C10,C9,C8等,单独保存在一个数组中,根据断面的不同,名称有所不同。从左到右绘制,对应pressureName的各元素。

贝塞尔曲线

各测压管的渗压水位,连成一条线就是大坝的浸润线示意图。在custom类型的series中,有一种类型是返回series-custom.renderItem.return_bezierCurve. type = bezierCurve。这里指的是绘制二次或三次贝塞尔曲线。在该项目中,我仅用smooth:0.4平滑了一下。可能跟实际的浸润线有所出入。后面如果要调整浸润线的形态的话,可以用上贝塞尔曲线了。
此处查阅了贝塞尔曲线调整参数对应实际曲线的资料。http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
贝塞尔曲线
具体就是要调整shape属性中的起始点,结束点,以及控制点的值(1或2个控制点)来满足要求。
问题最大的一段可能是:
大坝浸润线
这里接的都是实际的数据,但是第一段浸润线也应该不对。渗压管的水位按说不能跟实际水位差这么多的。
待客户验收前再来调整。

  • 8
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
【资源说明】 TypeScript基于canvas绘制大坝浸润线源码+使用说明.zipTypeScript基于canvas绘制大坝浸润线源码+使用说明.zip 项目说明: - 传入`大坝高度`、`大坝迎水面宽度`、`大坝背水面宽度`、`大坝坝顶宽度` 等四个参数来绘制大坝形状 - 传入`渗压传感器数据`绘制传感器点位及渗流面 initialize | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `damHeight` | 大坝高度(m) | `number` | - | | `damLeftWidth` | 大坝迎水面宽度(m) | `number` | - | | `damRightWidth` | 大坝背水面宽度(m) | `number` | - | | `damTopWidth` | 大坝坝顶宽度(m) | `number` | - | | `seaLevel` | 坝外水位 | `number` | - | addSensor | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `name` | 传感器名称 | `string` | - | | `value` | 传感器值(m) | `number` | - | | `distance` | 传感器距离闸门的距离(m), 闸门位置以迎水坡和背水坡为界。 | `number` | - | - distance: 有效值为 `[-damLeftWidth, +damRightWidth]`。假如迎水坡宽度为`200`,背水坡宽度为`100`, 则取值范围为`[-200, 100]`, `0`表示在闸门处。 methods | 方法名称 | 描述 | 参数 | | --- | --- | --- | | updateSensor | 更新单个传感器 | `{name, value, distance}` | | updateSensors | 全量更新传感器 | `Array<{name, value, distance}>` | 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载,沟通交流,互相学习,共同进步!
引用\[2\]中提到了echarts的官方网站,你可以在官方网站上找到关于echarts的详细文档和示例。在官方文档中,你可以找到关于echarts的各种配置项和方法的说明。在这里,我将为你解释一下echarts中的alignticks用法。 alignticks是echarts中的一个配置项,用于控制坐标轴刻度的对齐方式。当设置为true时,坐标轴的刻度会自动对齐,使得刻度线在不同的坐标轴上对齐。当设置为false时,刻度线不会对齐。 例如,如果你有两个y轴,一个是左侧的y轴,一个是右侧的y轴,你可以通过设置alignticks为true来使得两个y轴的刻度线对齐,这样可以更好地比较两个y轴上的数据。 具体使用方法如下: ``` option = { yAxis: \[ { type: 'value', alignticks: true }, { type: 'value', alignticks: true } \], series: \[ { data: \[120, 200, 150, 80, 70, 110, 130\], type: 'bar', yAxisIndex: 0 }, { data: \[50, 80, 70, 90, 120, 100, 80\], type: 'line', yAxisIndex: 1 } \] }; ``` 在上面的示例中,我们设置了两个y轴,并且将alignticks设置为true。然后分别在series中指定了每个系列对应的y轴索引。 这样,echarts会自动对齐两个y轴的刻度线,使得它们在相同的位置上对齐。 希望这个解释对你有帮助! #### 引用[.reference_title] - *1* *3* [Echarts遇见的小问题方法解决](https://blog.csdn.net/HeXinT/article/details/125653336)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Echarts图表使用](https://blog.csdn.net/yuanchun05/article/details/126550429)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值