echarts图表 柱状图柱体颜色渐变

功能点： 柱状图的柱体颜色渐变， 柱体上部数字显示

效果图

optionLeft2:{
     legend: {
       data: ['车辆数'],
       right: '5%',
       textStyle:{
         color:'#8effff',
         fontSize:12
       }
     },
     grid: {
       left: '3%',
       right: '4%',
       bottom: '3%',
       top: '10%',
       containLabel: true
     },
     xAxis: {
       type: 'category',
       data: ['5次以内', '5-10次', '10-15次', '20-30次', '30以上'],
       //x轴文字
       axisLabel: {
         color: "#ccc",
       },
       //x轴线
       axisLine: {
         lineStyle: {
           color: "#ccc",
         },
       },
     },
     yAxis: {
       type: 'value',
       //y轴文字
         axisLabel: {
           color: "#ccc",
         },
         //y轴线
         axisLine: {
           lineStyle: {
             color: "#ccc",
           },
         },
         //y轴区域内
         splitLine: {
           show: false,
         },
     },
     series: [
       {
         name:'车辆数',
         type: 'bar',
         stack: '总量',
         data: [120, 868, 791, 16, 5],
         itemStyle:{//颜色渐变代码
           normal: {
             color: new echarts.graphic.LinearGradient(
                 1, 0, 0, 0,
                 [
                   {offset: 0, color: '#f7ffb4'},
                   {offset: 0.5, color: '#44C0C1'},
                   {offset: 1, color: '#188df0'}
                 ]
             )
           },
         },
         label:{//label要加入normal才可生效,label即为x轴对应Y轴的值
           normal:{
             show:true,  
             color:'#ccc',//设置渐变时候控制不到颜色，只能通过全局textStyle来控制
             position:'top' //柱状图上数字的定位
           }
         },
       }
     ]
   },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75