理解图形构成

想象一下以下组成部分对应图形外观

然后看看自己是否想对了?

下面对比下Smartbi的图形配置界面和Echarts的图形配置项

扩展图形之:使用扩展属性

何时使用及使用前提

有了以上理解之后,什么情况下才会使用扩展属性扩展图形呢?
1、设置界面没有,echarts有
2、快速制作静态数据poc(使用覆盖模式)





使用扩展属性需要的前提条件,如果不了解,是无法做扩展的。
1、需要理解json对象、数组的概念及语法
1、掌握js基本数据类型语法(字符串、数字、逻辑值、null)




技巧:
使用扩展属性建议充分利用echarts在线实例(可编辑运行效果)

示例说明:

红色框中对应echarts实例的option = {…}对象的内容

想象一下POC需要下面图,您会怎么做?

  1. 多了个visualMap 是视觉映射组件
  2. Y轴刻度翻转
  3. X轴标线显示在0上,并且不显示轴线

所以,基本可以通过下面扩展属性调整
{xAxis: {
axisLine: {onZero: true},
splitLine: {show: false},
splitArea: {show: false}
},
yAxis: {
inverse: true
},
visualMap: {
。。。。。。。














使用技巧

对于初级使用者:



对于高级人员,对Echarts本身比较了解的。


扩展图形之:使用宏代码

当用到动态效果的时候,使用扩展属性也难以达到效果,此时我们需要考虑使用"宏"
宏的使用请参考: