Echarts实战案例代码(34)：柱状图箭头增长下降

1//定义两个上下箭头的矢量路径
2var up = 'path://M286.031,265l-16.025,3L300,223l29.994,45-16.041-3-13.961,69Z';
3var down = 'path://M216.969,292l16.025-3L203,334l-29.994-45,16.041,3,13.961-69Z'
4
5
6    series: [
7        {
8   
9   
10   
11            "name": "",
12            type: 'pictorialBar',
13            symbol: function(data,params){
14   
15   
16   
17                if(data2[params.dataIndex]>0){
18   
19   
20   
21                    return up
22                }else{
23   
24   
25   
26                    return down
27                }
28            },
29            symbolSize: [20, 30],
30            symbolOffset: [0, -40],
31            color:'orange',
32            symbolPosition: 'end',
33            label: {
34   
35   
36   
37                show: true,
38                position: "top",
39                formatter:  function(params){
40   
41   
42   
43                    return data2[params.dataIndex]
44                },
45                fontSize: 30,
46                fontWeight: 'bold',
47                color: '#34DCFF'
48            },
49            data: data1
50        },
51        {
52   
53   
54   
55            name: '直接访问',
56            type: 'bar',
57            barWidth: '40%',
58            data: data1
59        }
60    ]

重点代码：

1 symbol: function(data,params){
2   
3   
4   
5                if(data2[params.dataIndex]>0){
6   
7   
8   
9                    return up
10                }else{
11   
12   
13   
14                    return down
15                }
16            }

DONE!

本文同步分享在 博客“漏刻有时”（CSDN）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。