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

入门总结(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 这些来决定

在这里插入图片描述
在这里插入图片描述

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

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值