警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>ECharts>Echarts 改变markPoint标注(气泡)颜色

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

原创2018-11-12ECharts/JavaScript22218 次阅读 · 读完需要 4 分钟。

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

赞(32) 打赏
未经允许不得转载:W3Cbest前端开发>Echarts 改变markPoint标注(气泡)颜色

相关推荐

发表评论