Echarts里面的formatter一些参数到底是什么?怎么查看?

我们在开发过程中,都是用到一些图表啊,可视化的一些问题,可视化的工具有很多,我个人用的是Echarts。
在用Echarts过程中,里面给的实例很难正好满足需求,所以需要自定义在所难免。Echarts官网有API,有各种配置项说明,截个图看一下;
在这里插入图片描述
这么多配置项,我该从什么地方找起?(这还是只截图一半)特别是对于新手来说,可能就不是查配置项,而是直接百度。因此,我选择写这篇文章。

那些自定义formatter里面的参数到底是什么?
1. 如何查看参数

一般的都是在option里面配置的

tooltip: {
          show: true,
          formatter: function(datas) {
            if (datas.data[1] === 1) {
              var res = "设备状态:" + "运行";
              return res;
            } else {
              var res = "设备状态:" + "未运行";
              return res;
            }
          }
        },

在option里面没法打印到控制台,那这里面的datas到底是什么呢?
我们可以进行如下操作:

self.blChartsOption.tooltip.formatter = function(datas) {
          console.log(datas);
          if (datas.data[1] === 1) {
            var res = "设备状态:" + "运行";
            return res;
          } else {
            var res = "设备状态:" + "未运行";
            return res;
          }
        };

在methods里面请求数据的方法里
我们就可以打印出来datas里面的数据
在这里插入图片描述
比如说我这次操作:是根据data里面的第二个数据来进行判断是运行还是未运行。
打印出来datas之后,我们就能找到里面的数据通过datas.data[1],就能拿到所需要的数据
效果如下:
在这里插入图片描述
在这里插入图片描述
同时也能进行颜色判断,不同的数值给不同的颜色

series: [
          {
            symbolSize: 20,
            data: [],
            type: "scatter",
            itemStyle: {
              normal: {}
            }
          }
        ]

同样在方法里面写

self.blChartsOption.series[0].itemStyle.normal.color = function(params) {
          if (params.data[1] === 1) {
            return "#1262a1";
          } else {
            return "red";
          }
        };

希望对大家有所帮助!

### 回答1: ECharts是一款非常强大的数据可视化库,其`series`配置项包含了多种不同类型的图表系列参数,具体参数如下: - `type`:图表类型,包括折线图(`line`)、柱状图(`bar`)、散点图(`scatter`)、饼图(`pie`)、地图(`map`)等。 - `name`:系列名称。 - `data`:系列数据。不同类型的图表系列,数据格式有所不同,例如折线图需要一个二维数组,柱状图需要一个一维数组等。 - `smooth`:是否平滑曲线。 - `symbol`:标记点图形,例如折线图中的圆圈。 - `symbolSize`:标记点大小。 - `label`:标签配置项,包括文字颜色、字体大小等。 - `itemStyle`:图形样式配置项,包括颜色、透明度等。 - `areaStyle`:区域填充样式配置项,仅对折线图、柱状图等有区域填充的图表有效。 - `emphasis`:高亮样式配置项,当鼠标移到数据项上时触发。 - `animation`:是否开启动画效果。 以上仅是`series`配置项的一部分,具体参数根据不同图表类型可能会有所变化。如需详细了解ECharts的`series`配置项,请参考官方文档:https://echarts.apache.org/zh/option.html#series。 ### 回答2: ECharts中的series参数有很多,用于配置不同类型的图表。以下是几个常用的series参数: 1. name:数据项的名称,用于在图例中显示。可以通过设置series.name来设置整个系列的名称,也可以通过设置data[i].name来设置特定数据项的名称。 2. type:图表的类型,包括折线图(line)、柱状图(bar)、散点图(scatter)、饼图(pie)等。 3. data:图表的数据。可以是一个数组,也可以是一个二维数组。每个元素代表一个数据项,可以包含数值和其他属性。例如,在折线图中,data[i].value表示第i个数据项的数值。 4. label:标签的样式设置。可以配置标签的文字样式、位置、显示方式等。例如,在柱状图中,可以使用label.normal.show参数来设置是否显示标签。 5. itemStyle:图表元素的样式设置。可以配置图表元素的颜色、边框、透明度等。例如,在散点图中,可以使用itemStyle.normal.color参数来设置每个散点的颜色。 6. markLine:用于标记线的设置。可以配置平均线、最大值线、最小值线等。例如,在折线图中,可以使用markLine.data参数来设置平均线的数值。 7. markPoint:用于标记点的设置。可以配置最大值点、最小值点等。例如,在折线图中,可以使用markPoint.data参数来设置最大值点的数值。 8. tooltip:提示框的设置。可以配置提示框的内容、触发方式等。例如,在饼图中,可以使用tooltip.formatter参数来设置提示框显示的内容。 以上是一些常见的series参数,实际使用中还可根据需要配置其他参数,以满足不同的数据展示需求。 ### 回答3: ECharts是一个基于JavaScript的可视化库,用于绘制各种类型的图表。在ECharts中,series是用于定义图表中数据系列的对象,主要用来描述图表的数据和样式。 series参数包括以下几个主要属性: 1. type:表示系列的类型,如line(折线图)、bar(柱状图)、pie(饼图)等等,不同类型的图表有不同的属性和功能。 2. name:系列的名称,可用于图例(legend)中显示。 3. data:系列的数据,根据图表的类型而不同。对于折线图、柱状图等,数据为一个二维数组,表示每个数据点的数值;对于饼图等,数据为一个对象数组,表示每个数据项的数值和名称。 4. symbol:系列中标记的图形,可选参数有"circle"(圆形)、"rect"(矩形)、"triangle"(三角形)等。用于在图表中显示数据点的标记。 5. symbolSize:标记图形的大小,用来调整标记图形的显示大小。 6. itemStyle:系列的样式设置,用于定义数据项的样式,包括颜色、边框线样式等。 7. label:用于设置数据项的标签(文本)显示样式,包括颜色、字体大小等。 8. lineStyle/barStyle/pieStyle:不同类型图表的样式设置,用于定义折线图、柱状图、饼图等的样式。 9. markPoint/markLine:用于标记图表上的特定点和线。 以上是series中的一些常用参数,具体的参数和功能还可以根据具体的图表类型进行扩展和定制。通过调整series中的参数,可以实现图表数据的展示和样式的定制化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值