Echarts 的几个小需求实现

前端在图表展示的时候，使用较多的是Echart库，正好这几天在做相关的项目，简单记录一下涉及到的几个简单需求实现。

标题前面加图形

效果类似于这样：

我的实现方案是使用 rich 来生成对应的图形，具体配置如下：

/** @format */

option = {
    title: {
        text: "{rectangle|} 示例图",
        textStyle: {
            fontSize: 18,
            rich: {
                // 这个地方的key要和上面text后大括号中的名称保持一致！！！
                rectangle: {
                    width: 40,
                    height: 18,
                    backgroundColor: "#7C260B"
                }
            }
        }
    }
};

上面配置需要注意的是 text 中的类似于模板字符串的写法，里面的竖线（|）不能少，如果少了它，那 rectangle 就被解析成一个字符串了。

配置显示的最大个数

假如我们的数据比较多，一次性全部展示出来的话会密密麻麻，用户体验不好，那我们就需要根据需要展示的总条数，计算出需要给用户展示出来的视图百分比范围。

需求：X 轴最多展示的数据不能超过 50 个。

方案：Echarts 的滚动是通过 dataZoom 属性来控制的，每次拿到数据后进行计算，以 50 为判断依据，看是否需要分部展示。

// total:总条数
// batch 允许最大显示的条数
function getDataZoomEndValue(total, batch) {
    return IControl.x.length > batch ? Math.ceil(batch * 100 / IControl.x.length) : 100;
}

/** @format */

option = {
    dataZoom: {
        type: "inside",
        start: 0,
        end: getDataZoomEndValue(totalData.length, 50),
        zoomLock: true
    }
};

end 属性确定的就是视图最大百分比。

设置异常点

需求效果如下：

要将一些超出范围的点用不同的颜色标志出来。

方案：使用markPoint属性实现，即在需要标志出来的点上再加一层特殊颜色的点，展示出来的是特殊颜色。

/** @format */

markPointData = [
    {
        name: "order_6",
        xAxis: "6",
        yAxis: 1.812
    },
    {
        name: "order_9",
        xAxis: "9",
        yAxis: 1.2
    }
];

option = {
    series: [
        {
            name: "test",
            type: "line",
            symbol: "circle",
            symbolSize: 8,
            data: data,
            z: 4,
            itemStyle: {
                borderWidth: 2,
                borderColor: "#014D64",
                color: "#014D64"
            },
            lineStyle: {
                width: 2
            },
            markPoint: {
                symbol: "circle",
                label: {
                    show: false
                },

                itemStyle: {
                    color: "#7C260B",
                    borderColor: "#7C260B",
                    borderWidth: 2
                },
                symbolSize: 8,
                data: markPointData
            }
        }
    ]
};

需要注意的是，markPoint.itemStyle.borderWidth 和 markPoint.symbolSize 相加必须要大于 symbolSize 与 itemStyle.

borderWidth 之和，否则标出的特殊颜色覆盖不全正常的颜色。

总结

以上就是几个关于 Echart 图形的简单配置方法，希望对大家有所帮助，大家如果有更好的实现方案，欢迎在评论区留言交流！