前端开发 大前端 W3Cbest

一个专注 WEB 开发的技术博客

0%

Echarts 改变markPoint标注(气泡)颜色

改变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.

坚持技术创作分享,您的支持将鼓励我继续创作!