改变markPoint 标注(气泡)颜色的方法很简单,其实还是多翻文档,markPoint属性有很多下面列了几个也不一一介绍了,自己翻文档。
markPoint:{
symbol: ‘pin’, //标记(气泡)的图形
symbolSize: 50, //标记(气泡)的大小
…
itemStyle: {…}, //标注(气泡)的样式
}
symbol
标记的图形,默认是个气泡型的,看上图很清晰,
symbolSize
标记的大小,设置标记的大小,可根据自己的嗜好设置大小
itemStyle
标注(气泡)的样式就是这个属性,其实文档讲的都很清晰,只是有的人真的很懒只会问不会找
itemStyle:{
color: ‘#4587E7’,
borderColor: ‘#000’,
borderWidth: 0,
borderType: ‘solid’,
…
}
color [ default: 自适应 ]
图形的颜色。
borderColor [ default: “#000” ]
图形的描边颜色。支持的颜色格式同 color,不支持回调函数。
borderWidth [ default: 0 ]
描边线宽。为 0 时无描边。
borderType [ default: ‘solid’ ]
柱条的描边类型,默认为实线,支持 ‘solid’, ‘dashed’, ‘dotted’。 在结束之前,提一下如何给每个值都加上标注(气泡),在文档代码看到的气泡是在最大值或最小值上,那么如何给每个值都加上标注(气泡)呢,其实这些值就是你的坐标轴上data值,如果想在每个值的上面显示标注,就要循环你的data值,但是在那循环呢,还是在markPoint对象里面,看文档API里面markPoint还有个data数组对象属性,文档是这样说的;
series[i]-line.markPoint.data[i]
标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。
- 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。
- 用 coord 属性指定数据在相应坐标系上的坐标位置,单个维度支持设置 ‘min’, ‘max’, ‘average’。
- 直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时,优先级按上述的顺序。 那么我们可以把数据组装成多个对象,例如我有一个数组
series: {
data: [820, 932, 901, 934, 129, 670],
…
markPoint: {…},
}
那么我要在markPoint里面应该是这样组装的
series: {
data: [820, 932, 901, 934, 129, 670],
…
markPoint: {
…
data: [
{value: 820, xAxis: 0, yAxis: 820},
{value: 932, xAxis: 1, yAxis: 932},
{value: 901, xAxis: 2, yAxis: 901},
{value: 934, xAxis: 3, yAxis: 934},
{value: 129, xAxis: 4, yAxis: 129},
{value: 670, xAxis: 5, yAxis: 670}
]
}
…
}
这样就如上图一样效果就出来了 来个?,假设一组数组,大于50显示红色,小于则显示绿色
See the Pen echarts markPoint 气泡 by w3cbest.com (@w3cbest) on CodePen.