echarts案例之双折线渐变图

一、此案例基于Vue3+ts,效果展示:

echarts案例之双折线渐变图_第1张图片

二、单个属性的值:

1、tooltip中的trigger属性

值:

1.axis是鼠标hover到一条柱状图显示全部数据

2.item是鼠标hover到折线点显示相应数据

2、tooltip中的type属性

不写这个属性,默认为line

值:

1.line 鼠标移上去为竖直线

2.cross 鼠标移上去显示十字线

3.shadow 鼠标移上去显示灰色方框

3、legend中的icon属性

值:

1.circle 圆形

2.rect 方形

3.roundRect 圆角方形

4.triangle 三角形

5.diamond 菱形

6.pin 定位点

7.arrow 箭头

4、series中的symbol属性

1.circle 实心圆

2.rectangle 实心方块

3.triangle 实心三角

4.diamond 实心菱形

5.emptyCircle 空心圆

6.emptyRectangle 空心方块

7.emptyTriangle 空心三角

8.emptyDiamond 空心菱形

9.heart 心形

10.droplet 水滴

11.pin 定位点

12.arrow 箭头

13.star 五角星,'star' + n(n>=3)可变化出N角星,如指定为'star6'则可以显示6角星 

三、完整代码如下:




你可能感兴趣的:(echarts,1024程序员节,echarts,前端,vue.js)