飞道的博客

angular+ng-zorro+echarts入门总结(三)

388人阅读  评论(0)

入门总结(echarts篇)

要放假了,赶紧总结一下,不然都忘光了

正文

1.安装、创建、运行hello word

hello word 走这个

2.记录下零散的知识

1. 更新图表中的数据
有时候在 服务中更新了数据,但是发现重新给optiios 赋值,并不会改变echarts的内容,我猜测:因为echarts通过option绘制出canvas,所以本地服务中数据改变,但是没有告诉echarts说,你给我重新绘制一个canvas 吧,所以解决如下

<div  [class]='isFadeMode?"fadeModeClass":""' echarts   [options]="option" (chartInit)="onChartInit($event)"></div>

重点在于onChartInit*($event),对应的组件中处理如下

2.axisPointer 坐标轴指示器
tooltip提示框,我理解的是一种聚焦效果,这是配置出的光柱效果,主要是shadowStyle,但是前提 同级type为“shadow”

效果如下

2.tooltip.formatter

  • 可以在里面写html标签 style 但是class 还没试过,实现了三角形,文本的flex布局,仅仅是文本内容的定义,边框及背景由外层的borderColor,backgroundColor来定义。

    效果如下图

    3.lengend 图例
  • 图例中的data.name要与series-bar.name对应,不然图例不会显示
  • 图例自身的位置由 left bottom 这些来决定

4.label 标签

  • series-bar.label 可决定每个柱子显示 数值,及位置等属性
  • 图例自身的位置由 left bottom 这些来决定


(其他的记不住了,想起了,再来补充)


转载:https://blog.csdn.net/qq_40020447/article/details/116306116
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场