Echart的一些有趣配置

最新推荐文章于 2023-06-27 15:30:00 发布

南风_思学

最新推荐文章于 2023-06-27 15:30:00 发布

阅读量1.2k

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_44444069/article/details/122802093

版权

Echart的一些有趣配置

重叠柱状图

两个关键配置： barGap 和 blendMode

echart的实例只有向上叠加的柱状图，实际上如果想让柱状图叠加的话设置柱间距离barGap: '-100%'即可

 {
          name: occupyRateStaYdata[0].name,
          type: 'bar',
          barWidth: '97%',
          data: occupyRateStaYdata[0].data,
          blendMode: 'darken'
        },
        {
          name: occupyRateStaYdata[1].name,
          type: 'bar',
          barGap: '-100%', //让两个柱状图可以重叠  stack是向上叠加
          barWidth: '97%',
          data: occupyRateStaYdata[1].data,
          blendMode: 'darken' //图形的混合模式
        }

各种图形混合模式类型详见：CanvasRenderingContext2D.globalCompositeOperation - Web APIs | MDN

建议多尝试几种类型找到和UI设计最相符的类型

内置和外置的区域缩放组件

dataZoom-slider&inside 滑动条和内置滚动

通过 start end设置默认数据窗口显示范围

通过slider-zoomLock，inside-zoomOnMouseWheel&moveOnMouseWheel设置鼠标滚轮区域平移且不可缩放

如果可缩放的话可通过 minSpan maxSpan minValueSpan maxValueSpan设置缩放时的窗口大小的最小值和最大值
极坐标下的堆叠柱状图

echart实例地址：Examples - Apache ECharts

主要配置：

angleAxis-极坐标系的角度轴

startAngle-起始刻度的角度

axisLine-坐标轴轴线

axisTick-坐标轴刻度

axisLabel-坐标轴刻度标签

splitLine-坐标轴在 grid 区域中的分隔线

radiusAxis-极坐标系的径向轴

splitNumber-坐标轴的分割段数

polar-极坐标系

center-极坐标系的中心（圆心）坐标

radius-极坐标系的半径
趋势图的平滑效果

设置了曲线平滑的属性smooth: true 但是斜率太陡的地方仍不平滑

这时可配置smoothMonotone: 'x'即可解决

smoothMonotone：折线平滑后是否在一个维度上保持单调性，可以设置成'x', 'y'来指明是在 x 轴或者 y 轴上保持单调性。

图例可置灰如果全部置灰没数据交互不是很好可优化：当置灰最后一个高亮图例时全部高亮

before:

after:

echart的事件处理函数链接：Documentation - Apache ECharts

 // 判断图例是否是全部为false 如果全部为false则全部选中
    this.chartInst.on('legendselectchanged', obj => {
      var selected = obj.selected;
      var legend = obj.name;
      if (selected != undefined) {
        if (this.isAllUnSelected(selected)) {
          this.triggerAction('legendSelect', selected);
        }
      }
    });
    
    triggerAction(action, selected) {
      var legend = [];
      for (name in selected) {
        if (selected.hasOwnProperty(name)) {
          legend.push({ name: name });
        }
      }
      this.chartInst.dispatchAction({
        type: action,
        batch: legend
      });
    },
        
    isAllUnSelected(selected) {
      var selectedCount = 0;
      for (name in selected) {
        if (!selected.hasOwnProperty(name)) {
          continue;
        }
        if (selected[name] == true) {
          ++selectedCount;
        }
      }
      return selectedCount == 0;
    }

线性渐变和径向渐变

颜色设置参考echart即可：Documentation - Apache ECharts

案例：

线性渐变-折线图的线渐变和区域渐变

径向渐变-极坐标下的堆叠柱状图的柱状图渐变

小知识点：区域渐变使用 areaStyle

areaStyle-origin：图形区域的起始位置

默认情况下，图形会从坐标轴轴线到数据间进行填充。当坐标轴有正有负时，如图：

'start' 填充坐标轴底部（非 inverse 情况是最小值）到数据间的区域；
'end' 填充坐标轴顶部（非 inverse 情况是最大值）到数据间的区域。

优化后：areaStyle-origin：start

7.标线和文字提示：markLine

大于3的部分标红：visualMap

visualMap：视觉映射组件 Documentation - Apache ECharts

pieces:自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式

8.图的Y轴轴线均匀

折线图在实际开发时会遇到两个异常情况：当只有一个点时不显示，连线中断

可通过两个配置解决

showAllSymbol: true, // 所有数据点都显示出来

connectNulls: true, // 让散点全连成线

折线图或者柱状图如果不将Y轴设置均匀，容易导致轴线错乱，双Y轴不重合，Y轴最上方出现一条单线，所以我们可以手动进行计算并配置，这样效果会好很多

before:

after：

简单处理如下就可

//均匀分为4段
let DataMax = Math.max(...this.Data);
let Max = DataMax > 1 ? (Math.ceil(DataMax / 4) * 4 >= 4 ? Math.ceil(DataMax / 4) * 4 : 4) : DataMax;
let interval = DataMax > 1 ? (Math.ceil(DataMax / 4) >= 1 ? Math.ceil(DataMax / 4) : 1) : DataMax / 4;
      
      let yAxis = [
        {
          type: 'value',
          ...genyAxis({ name: '' }),
          splitNumber: 4,
          max: Max,
          interval: interval
        }
      ];
如果Y轴存在负数 则

 let Data = this.scatterData.length > 0 ? this.Data.slice(0, this.Data.length - 1) : this.Data;
      let DataMax = Math.max(...Data); //最大值
      let DataMin = Math.min(...Data); //最小值
      let minusData = this.Data.filter(item => item < 0); //负数数据
      let Max, interval, Min;

      if (minusData.length > 0) {
        //存在负数 考虑最大值>0且最小值小于-1 和最大值和最小值相等 一些特殊情况
        Max = DataMax > 1 ? (Math.ceil(DataMax / 2) * 2 >= 2 ? Math.ceil(DataMax / 2) * 2 : 2) : DataMax == DataMin ? 0 : DataMax;
        Min = DataMax > 0 && DataMin < -1 ? (Math.ceil(DataMin / 2) * 2 <= -2 ? Math.ceil(DataMin / 2) * 2 : DataMin) : DataMin;
        interval =
          DataMax > 0 && DataMin < -1 ? ((Max - Min) / 4 >= 1 ? Math.ceil((Max - Min) / 4) : (Max - Min) / 4) : DataMax == DataMin ? (Max - DataMin) / 4 : (DataMax - DataMin) / 4;
      } else {
        //全部大于0
        Max = DataMax > 2 ? (Math.ceil(DataMax / 4) * 4 >= 4 ? Math.ceil(DataMax / 4) * 4 : 4) : DataMax;
        interval = DataMax > 2 ? (Math.ceil(DataMax / 4) >= 1 ? Math.ceil(DataMax / 4) : 1) : DataMax / 4;
        Min = 0;
      }

 let yAxis = [
        {
          type: 'value',
          ...genyAxis(),
          splitNumber: 4,
          max: Max,
          min: Min
        }
      ];

案例：