echarts之markPoint(在途中任意位置增加标注及自动获取最大最小值处理)
前言
记录自己工作中的一点小心得，希望可以帮助有同样需求的朋友。
1.使用场景
之前我工作中有需要在图标中添加特殊标识的，我是费劲用散点图进行添加，十分麻烦。又比如有需要计算最大最小值然后特殊处理的，我都是先遍历算出，然后将对应替换对应值处理。 今天发现这个属性后，用了下，很好，很强大，能节省不少工作量，推荐使用。
使用很简单，在series对象中添加markPoint对象即可，属性可以设置官方提供的几种基本图形，也可以自己添加对应的图案使用，文本属性也可以设置，同其他一样。至于具体位置的使用在其的data中：(引用官方，懒)：
有下面几种方式指定标注的位置: 1.通过 x, y 属性指定相对容器的屏幕坐标，单位像素，支持百分比。 2.用 coord 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 ‘min’, ‘max’, ‘average’。 3.直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时，优先级按上述的顺序。 简单的示例： 代码如下：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
markPoint:{
data: [{
type: "max",
symbol: "pin",
symbolSize: 50,
animation: true,
label: {
show: true,
color: '#000'
},
itemStyle: { color: '#f00' }
},
{
coord: [5, 100],
symbol: "diamond",
symbolSize: 50,
value: '特殊标记',
animation: true,
label: {
show: true,
color: '#000'
},
itemStyle: { color:'#0f0' }
},
{
x: '50%',
yAxis:50,
symbol: "roundRect",
symbolSize: 50,
value: '特殊标记2',
animation: true,
label: {
show: true,
color: '#000'
},
itemStyle: { color: '#00f' }
},
{
type: "min",
symbol: "pin",
symbolSize: 50,
animation: true,
label: {
show: true,
color: '#000'
},
itemStyle: { color: '#faf' }
}],
}
}
]
};
自己笔记，仅供参考，有好的想法互相学习借鉴，共同进步思密达~
参考文章
您阅读本篇文章共花了：
发表评论