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

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

那些自定义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里面的数据
Echarts里面的formatter一些参数到底是什么?怎么查看?_第2张图片
比如说我这次操作:是根据data里面的第二个数据来进行判断是运行还是未运行。
打印出来datas之后,我们就能找到里面的数据通过datas.data[1],就能拿到所需要的数据
效果如下:
Echarts里面的formatter一些参数到底是什么?怎么查看?_第3张图片
Echarts里面的formatter一些参数到底是什么?怎么查看?_第4张图片
同时也能进行颜色判断,不同的数值给不同的颜色

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";
          }
        };

希望对大家有所帮助!

你可能感兴趣的:(可视化,js,echarts)