Echart使用笔记

最新推荐文章于 2024-04-04 09:29:15 发布

转载最新推荐文章于 2024-04-04 09:29:15 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sanqianjin/p/9554528.html

文章标签：

#javascript #ViewUI

博客围绕ECharts的相关设置展开，介绍了grid.containLabel在Y轴文字过长显示不全时的使用，可防止标签溢出，还给出解决文字显示不全的方法；同时阐述了yAxis.triggerEvent、yAxis.formatter与yAxis.rich的应用，实现Y轴增加图标及删除功能。

一、 registerTheme

注册主题，用于初始化实例的时候指定。

Echart官网主题下载： http://echarts.baidu.com/download-theme.html

最好的办法是定制主题，然后修改里面的选项

   使用方法
  
   echarts.init（dom,theme）
  
   el: echarts.init($(selector)[0], 'schoolReport');

二、 resize

改变图表尺寸，在容器大小发生改变时需要手动调用。

Tip: 有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布，或者在 opts 中显示指定图表高宽。

el：比如两个标签页公用一个图表，在一个标签页宽高发生变化后，调用此方法重置容器大小

   $(selector)[0].style.height = yAxis.length * 50 + "px";
  
   myChart.clear();
  
   myChart.resize();
  
   myChart.setOption(option);

三、 on & off

绑定 & 解绑事件处理函数。

el：图表公用的时候，一定要调用off之后在绑定时间，否则事件触发越来越多

   myChart.off("click");
  
   myChart.on('click', function (param) {
  
       if (param) {
  
           callback(param.dataIndex, param.name);
  
       }
  
   });

四、 yAxis.axisLabel. interval

坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。

el：当X\Y轴数据过长时，会隐藏一部分X\Y轴的名称，而隔几个显示，可以设置成 0 强制显示所有标签。

   yAxis: {
  
       type: 'category',
  
       axisLabel:{
  
           interval: 0
  
       },
  
       data: yAxis
  
   },

五、 tooltip.position

提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。

el：随着鼠标的位置移动，并在鼠标的右下15

   tooltip: {
  
       trigger: 'axis',
  
       axisPointer: { // 坐标轴指示器，坐标轴触发有效
  
           type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
  
       },
  
       position: function (point, params, dom, rect, size) { //point: 鼠标位置
  
           // 固定在顶部
  
           return [point[0] + 15, point[1] + 15];
  
       }
  
   },

六、 tooltip.formatter

提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

el： http://echarts.baidu.com/option.html#tooltip.formatter

   tooltip: {
  
       trigger: 'axis',
  
       axisPointer: { // 坐标轴指示器，坐标轴触发有效
  
           type: 'line' // 默认为直线，可选为：'line' | 'shadow'
  
       },
  
       formatter: "{b} : {c} 次"
  
   },

          tooltip: {
            formatter: function (params) {
              //公式计算显示次数×权重 let result = params[0].name + "<br>"; params.forEach(function (item, i) { const seriesIndex = params[i].seriesIndex; const score = data[seriesIndex].score; if (parseInt(params[i].data) == 0) { result += params[i].marker + params[i].seriesName + ": " + params[i].data + "<br>"; } else { result += params[i].marker + params[i].seriesName + ": " + params[i].data + " ( " + parseInt(params[i].data / score) + "次" + " × " + score + " ) " + "<br>"; } }) return result; } },

七、 grid.containLabel

Y轴文字过长显示不全是使用

el: http://echarts.baidu.com/option.html#grid.containLabel

containLabel 为 true 的时候：这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。

          grid: {
            left: 20
            right: 20,
            bottom: '0',
            top: '0',
            containLabel: true
          },

***还有一种情况，初始化时显示的是文字长度，但是删除最长的文字那行，页面重新渲染后，Y轴的长度发生改变，文字还是显示不全***

1、找出最长的文字，根据设置的字体计算出文字长度

    //尝试计算Y轴删除按钮的落点
    let yAxisTextMaxoffsetX = 0;
    try {
      let yAxisTextMaxLength = 0;
      let yAxisTextMaxContent = "";
      yAxis.forEach(function (item) {
        let len = 0;
        for (var i = 0; i < item.length; i++) {
          if (item.charCodeAt(i) > 255) {
            //汉字两个字符
            len += 2;
          } else {
            len++;
          }
        }

        if (len > yAxisTextMaxLength) {
          yAxisTextMaxContent = item;
        }
        yAxisTextMaxLength = Math.max(len, yAxisTextMaxLength);
      })
      yAxisTextMaxoffsetX = yAxisTextMaxLength * 6 //12px/2
      console.log("最长的内容为：" + yAxisTextMaxContent + "，字符长度为:" + yAxisTextMaxLength + "，计算出的长度为：" + yAxisTextMaxoffsetX);
    } catch (error) {
      console.log(error);
    }

2、设置grid.left为最长文字长度

       grid: {
            left: yAxisTextMaxoffsetX == 0 ? 20 : yAxisTextMaxoffsetX + 8,//yAxis.axisLabel.margin 默认为8
            right: 20,
            bottom: '0',
            top: '0',
            containLabel: yAxisTextMaxoffsetX == 0 ? true : false,
          },

八、 yAxis.triggerEvent 与 yAxis.formatter yAxis.rich

Y轴增加图标，实现删除功能

el:

1、增加图标：使用formatter编辑返回值，搭配rich的backgroundColor增加删除图标。

http://echarts.baidu.com/option.html#yAxis.axisLabel.rich

         yAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              formatter: function (value, index) {
                return value + '{space|}' + '{del|}';
              },
              // rich 里是文本片段的样式设置：
              rich: {
                del: {
                  width: 20,
                  height: 20,
                  align: 'center',
                  backgroundColor: {
                    image: '/static/hide.svg',
                  },
                },
                space: {
                  width: 3
                }
              }
            },
            data: yAxis,
            triggerEvent: true,//是否触发事件,param.componentType == "yAxis"
          },

2、删除功能：由于param返回的值少，只能根据鼠标落点，计算是否点击了图标。根据获取的value找出index，将数据删除

        myChart.on('click', function (param) {
          if (param && param.componentType == "yAxis") {
            console.log("单击了" + param.value + "的Y轴标签" + "，位置在" + param.event.offsetX);
            if (yAxisTextMaxoffsetX != 0 && param.event.offsetX < yAxisTextMaxoffsetX) {// yAxisTextMaxoffsetX值的计算在上边第七里
              return false;
            }
            let activeIndex = 0;
            yAxis.forEach(function (item, index) {
              if (item === param.value) {
                activeIndex = index;
                return;
              }
            });
            yAxis.splice(activeIndex, 1);
            data.forEach(function (item) {
              item.data.splice(activeIndex, 1);
            });
            //TO 重绘echarts
          } else {
            console.log("单击了" + param.name + "柱状图");
            if (typeof callback === "function") {
              callback();
            }
          }
        });