Echarts 的几个小需求实现

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

标题前面加图形

效果类似于这样:

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

javascript 复制代码
/** @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 为判断依据,看是否需要分部展示。

JavaScript 复制代码
// 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属性实现,即在需要标志出来的点上再加一层特殊颜色的点,展示出来的是特殊颜色。

javascript 复制代码
/** @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 图形的简单配置方法,希望对大家有所帮助,大家如果有更好的实现方案,欢迎在评论区留言交流!

相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端