随便记录,自己用

最新推荐文章于 2024-11-04 16:17:23 发布

车车不困

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量182

点赞数

文章标签： javascript echarts 前端

本文链接：https://blog.csdn.net/qq_41704417/article/details/127388205

版权

本文介绍了如何自定义Echarts图表中的tooltip样式，通过示例展示了如何设置通用的formatter函数，以展示多维度数据。同时，详细讲解了ElementUI时间选择器的限制时间范围功能，提供了实现一个月内的日期选择限制的代码。最后，分享了CSS中的无敌穿透技巧，通过添加'pointer-events:auto'属性实现组件穿透。

摘要由CSDN通过智能技术生成

echarts 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;
 },

element ui 时间选择器-限制时间范围
例:一个月

 pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.cuttentTime = minDate.getTime()
          if (maxDate) {
            this.cuttentTime = ''
          }
        },
        disabledDate: (time) => {
          if (this.cuttentTime != '') {
            const one = 30 * 24 * 3600 * 1000
            const minTime = this.cuttentTime - one
            const maxTime = this.cuttentTime + one
            return time.getTime() < minTime || time.getTime() > maxTime
          }
        }
      }