Echarts纵向图表标题过长时的缩略处理以及关于Sentry前端监控部署及其简单使用

一、Echarts纵向图表标题过长时的缩略处理

    ECharts 是一个由百度公司开发的开源 JavaScript 图表库。它能够流畅地运行在 PC 和移动设备上，并且兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）。ECharts 提供了直观、交互丰富、可高度个性化定制的数据可视化图表，非常适合用于网页上的数据展示。ECharts因其强大的功能和易用性，在国内外得到了广泛的应用，是进行数据可视化开发的一个非常好的选择。其主要特点如下：

#. 主要特点：

1. 丰富的图表类型：ECharts 支持折线图、柱状图、散点图、饼图、雷达图、地图等多种图表类型，并且支持混合使用这些图表。

2. 高度可配置性：几乎所有的图表属性都可以通过配置项来调整，包括颜色、大小、位置、样式等，这使得开发者可以根据需求定制出独一无二的图表。

3. 良好的交互性：内置了丰富的交互功能，如鼠标悬停提示、点击选中、缩放和平移等，同时也支持自定义事件监听器，方便实现更复杂的交互逻辑。

4. 动态数据更新：支持数据的实时更新，适用于需要显示动态变化数据的应用场景。

5. 其它：包括跨平台兼容、易于集成、强大的API支持和拥有社区活跃等等。

使用echarts图表做页面展示的时候，有时轴上的标题文本过长，显示不全。这时如果图表是自动伸缩的话没关系，标题越长会占据越大的位置，但有时多个图表在一起展示，为了美观会控制座标轴上的标签长度或宽度，这时就需要对标题调用函数解决进行一些处理。可以对标题设置自动换行，或者设置超过一定长度时自动加省略号显示，如下图示例：

这时可以在axisLabel下添加属性和方法，当内容过长时，可以设置超过一定长度显示省略号，也可以设置按照一定长度进行内容换行处理。

axisLabel: {
  interval: 0,
  margin: 5,
  fontSize: 12,    
  //超过一定长度显示省略号  
  formatter:function(value){
    return value.length > 12 ? value.substr(0, 12) + '...': value
  }
  
  //按照一定长度进行内容换行处理
  formatter:function(value){
    var val = ""
    for(var i=0; i< Math.ceil(value.length/12); i++) {
      val += value.substr(i*10, 10) + "\n"
    }
    return val;
  }
},

在设置超过一定长度显示省略号的情况下，也可以通过设置在鼠标移动上去显示全部名称的方法。但我觉得不需要，因为在右边的数据区域，图标放上去之后本来就会显示完整的名称和数据。

二、关于Sentry前端监控部署及其简单使用

    在一个开源的产品中看到了一行错误追踪，下面调用了一个Sentry.init方法，通过了解后发现这是一个错误追踪的工具。于是进行了进一步的了解。

    **Sentry **是一个开源的实时错误监控的项目，它支持很多端的配置，包括web前端、服务器端、移动端等。支持各种语言，例如 python、oc、java、node、javascript等。也可以应用到各种不同的框架上面，如前端框架中的vue 、angular 、react等最流行的前端框架。简单的说就是通过Sentry，我们可以方便地在客户端进行错误上报，然后在Sentry服务端可以直接查看这些错误日志并能设置一些邮件等提醒。从而帮助我们立即知晓错误。

    可以通过docker方便地私有化部署Sentry，先安装好docker和docker-compose。docker-compose版本要求较高，在UBUNTU服务器上我开始使用的apt安装的docker-compose，然后在执行安装install时就收到如下提示，

AIL: Expected minimum docker-compose version to be 1.24.1 but found 1.17.1

先把基础docker和docker-compose安装好，快速安装使用版本比较新的docker-compose，把下面URL中的版本号改成提示的版本号。

#快速安装docker-compose
curl -L https://github.com/docker/compose/releases/download/1.24.0/docker-compose-`uname -s`-`uname -m` > ~/docker-compose 
mv ~/docker-compose /usr/local/bin/
chmod +x /usr/local/bin/docker-compose

#下载Sentry压缩包
wget https://github.com/getsentry/onpremise/archive/refs/tags/21.4.1.tar.gz
tar -zxvf 21.4.1.tar.gz
cd onpremise-21.4.1/
#执行安装中间会让你输入创建的用户账号密码
./install.sh
#执行启动所有容器
docker-compose up -d

整个安装过程还是要费些时间的，默认sentry占用9000端口，可以通过修改配置文件config.yml来调整端口。启动成功之后访问服务器的9000或你配置的端口，使用设置的账号密码即可访问sentry的管理后台，在后台中创建项目并将创建后项目的嵌入代码复制到你要监控的程序代码中，运行你的项目比如vue程序，在页面的执行过程中就会看到sentry服务端会收到一些日志，它会把你程序中的console、navigation以及用户的设备、浏览器等信息都上报上来并记录。

有篇详细的文章可参考：http://www.manongjc.com/detail/25-rzysvzafnguncta.html

使用下来，其实Sentry监控有点类似于网站统计一样，只是网站统计的是一些请求用户的客户端信息，而sentry主要统计的是程序中的异常报错，并且也记录了客户端的一些特征信息。

#. 文章评论转移

Level : 1. User：us20220307111040-762 Time：2022-06-16 23:06:32
创建react,vue项目制造错误然后上报没遇到接口403的问题吗