项目中常用的几个ehcharts小效果

it2023-10-11  56

写几个不常用但是最近Uo项目用到了的echart效果

主要因为越用越觉得echarts非常的人性化
(1)echart 自由间隔显示轴数据
下面是整十分显示,但是数据本身按照固定interval是无法做到的。

这个方法实在太有用了!

使用属性: axis, axisLabel, interval

我的项目要求比较简单,以前一直用下列方式分割label的显示

interval = number

这次满足不了,后来用函数的方式如下,也能顺利完成。

不得不说echart的定制选项很人性化了,整十分,整小时都可以完美显示;特别是在你的数据无法对称的时候,可以很好地帮助友好显示; 代码如下: interval: (index: number, value: string) => { if (parseInt(this.datePipe.transform(value, 'mm'), 10) % 10 === 0) { return true; } },
(2)tooltip默认样式

tooltip不写format属性的时候就是下面这个样子。 然鹅,写了属性,总是无法显示多组数据的情况,反正我没有用abc给拼出来。 所以使用了formatter:(params, ticket, callback) => {};的方式

params是个数组,有几个legend为true的状态,params就有几个长度的信息。官方还非常nice的封了一个marker在里面,以免tooltip太单调又不需要我们单独写标签。

formatter: (params: Array<any>) => { const time = params[0].axisValueLabel; let formatterString: string = time; params.map((v: any) => { formatterString += '<br/>' + v.marker + v.seriesName.toLowerCase() + ': ' + v.value; }); return formatterString; },
最新回复(0)