- 博客(4)
- 收藏
- 关注
RSS订阅原创 echarts 双axisPointer可拖拽移动获取区间值折线图
本文主要描述特殊需求需要两个标线可以随意改变位置然后比较厚拿两线的中间值过程的实现，可以通过chart的api监听事件方法拿到前后的axisPointer值在你本地存储的这个option数据中拿到想要的数据，具体的UI调整看个人。同理上面说法，如你是多条折线图，series你在操作所有数据push后，再手动push一条下面固定配置的series第二条数据对象，因为第二个以上的axisPointer需要占位与显示的值。重点1：xAxis数组第一条X轴默认是要显示的下面的X轴，颜色啊啥的随便改。
2025-03-26 14:58:39
385
原创 Echarts series line图形markLine的使用
代码中配置的两个方向是Y轴下标5位置与X轴下标5位置，也就是说会显示在响应的下标位置，在实际应用中你markLine.data应该是遍历得到的数组，当你默认data数组的xAxis是你遍历X轴的每条数据的index，那么就是有多少条X轴类目，就显示多少条标线，但与此文要说的需求并不相同，如上面示例展示实际上是。其中会看到series中的data坐标系存在null，请看第一张示例图中绿色line，可以看到存在断开，这也是需求的一部分，当然不能补空字符也可以‘’。以下就是示例的全部代码。
2025-01-22 16:40:32
1847
1
原创 Echarts 柱状图value占比展示与label配置tooltip配置显示正常值
在实际开发需求场景中，按需求配置总数量的value值，如你不知你当前数组每条数据的最大值是多少，那么取整个数组的最大值数据出来配置Total 数组中的每个value。例如：[{value: '1000' // 你的数组最大值}， {value: '1000'}, {value: '1000'}........]3.在上例代码中，FinishTotal数组->{}， value不配置原始值（指你本来要显示的数据），而是经过计算的min，就是当前值/当前这条数据的总数量*100等于它的占比。
2025-01-21 10:52:03
579
原创 Echarts option多个图形指定某个图形双Y轴或者双X轴
1.series配置由于每个是独立的图形，指定的XY轴都是由xAxisIndex、yAxisIndex指定配置第四个图表双Y轴时候可以看到Y轴数组有两个gridIndex: 3配置，另一个定位右边position：right。2.grid配置中y配置的px，这个是示例写死的方式，如在需求中布局等因素影响，需要自行计算位置与每个图形的间距。X轴的引用与配置，注意的是X轴配置的gridIndex与Y轴的配置gridIndex必须一致。grid配置：Y轴定位每个图形在不同的位置。series配置如下。
2025-01-20 15:16:36
487
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人