百度的Echarts bar图标怎么显示百分比

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了百度的Echarts bar图标怎么显示百分比相关的知识,希望对你有一定的参考价值。

下面是代码:
option =
title :
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
,
tooltip :
trigger: 'axis'
,
legend:
data:['蒸发量','降水量']
,
toolbox:
show : true,
feature :
mark : show: true,
dataView : show: true, readOnly: false,
magicType : show: true, type: ['line', 'bar'],
restore : show: true,
saveAsImage : show: true

,
calculable : true,
xAxis : [

type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

],
yAxis : [

type : 'value'

],
series : [

name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint :
data : [
type : 'max', name: '最大值',
type : 'min', name: '最小值'
]
,
markLine :
data : [
type : 'average', name: '平均值'
]

,

name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint :
data : [
name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18,
name : '年最低', value : 2.3, xAxis: 11, yAxis: 3
]
,
markLine :
data : [
type : 'average', name : '平均值'
]


]
;
参考技术A ab bar上的图标是有固定像素的。你做成30*30的就好了。
那个不是自动缩放大小的。像素30*30。做完试试吧。

或者点击这个链接 http://echarts.baidu.com/doc/example/bar1.html然后在代码哪里输入这端代码你就会看明白的了。你看到%的地方就是你要实现的代码了option =
title :
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
,
tooltip :
trigger: 'axis'
,
legend:
data:['蒸发量','降水量']
,
toolbox:
show : true,
feature :
mark : show: true,
dataView : show: true, readOnly: false,
magicType : show: true, type: ['line', 'bar'],
restore : show: true,
saveAsImage : show: true

,
calculable : true,
xAxis : [

type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

],
yAxis : [

type : 'value',
axisLabel:
show: true,
interval: 'auto',
formatter: 'value %'


],
series : [

name:'蒸发量',
type:'bar',
itemStyle: normal:
label : show:true,position:'top',formatter:'c %'
,
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint :
data : [
type : 'max', name: '最大值',
type : 'min', name: '最小值'
]
,
markLine :
data : [
type : 'average', name: '平均值'
]

,

name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint :
data : [
name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18,
name : '年最低', value : 2.3, xAxis: 11, yAxis: 3
]
,
markLine :
data : [
type : 'average', name : '平均值'
]


]
;
参考技术B 1
仁江1年前
你好,请点击这个链接 http://echarts.baidu.com/doc/example/bar1.html然后在代码哪里输入这端代码你就会看明白的了。你看到%的地方就是你要实现的代码了
?

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
76

option =
title :
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
,
tooltip :
trigger: 'axis'
,
legend:
data:['蒸发量','降水量']
,
toolbox:
show : true,
feature :
mark : show: true,
dataView : show: true, readOnly: false,
magicType : show: true, type: ['line', 'bar'],
restore : show: true,
saveAsImage : show: true

,
calculable : true,
xAxis : [

type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

],
yAxis : [

type : 'value',
axisLabel:
show: true,
interval: 'auto',
formatter: 'value %'


],
series : [

name:'蒸发量',
type:'bar',
itemStyle: normal:
label : show:true,position:'top',formatter:'c %'
,
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint :
data : [
type : 'max', name: '最大值',
type : 'min', name: '最小值'
]
,
markLine :
data : [
type : 'average', name: '平均值'
]

,

name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint :
data : [
name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18,
name : '年最低', value : 2.3, xAxis: 11, yAxis: 3
]
,
markLine :
data : [
type : 'average', name : '平均值'
]


]
;
参考技术C 你好,请点击这个链接 http://echarts.baidu.com/doc/example/bar1.html然后在代码哪里输入这端代码你就会看明白的了。你看到%的地方就是你要实现的代码了
?

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
76

option =
title :
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
,
tooltip :
trigger: 'axis'
,
legend:
data:['蒸发量','降水量']
,
toolbox:
show : true,
feature :
mark : show: true,
dataView : show: true, readOnly: false,
magicType : show: true, type: ['line', 'bar'],
restore : show: true,
saveAsImage : show: true

,
calculable : true,
xAxis : [

type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']

],
yAxis : [

type : 'value',
axisLabel:
show: true,
interval: 'auto',
formatter: 'value %'


],
series : [

name:'蒸发量',
type:'bar',
itemStyle: normal:
label : show:true,position:'top',formatter:'c %'
,
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint :
data : [
type : 'max', name: '最大值',
type : 'min', name: '最小值'
]
,
markLine :
data : [
type : 'average', name: '平均值'
]

,

name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint :
data : [
name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18,
name : '年最低', value : 2.3, xAxis: 11, yAxis: 3
]
,
markLine :
data : [
type : 'average', name : '平均值'
]


]
;

希望对你有帮助
参考技术D 他会根据你的数据自己显示的
http://echarts.baidu.com/demo.html#bar-stack
可以根据你想要的显示

以上是关于百度的Echarts bar图标怎么显示百分比的主要内容,如果未能解决你的问题,请参考以下文章

百度的Echarts bar图标怎么显示百分比

百度的Echarts bar图标怎么显示百分比

百度的Echarts bar图标怎么显示百分比

Echarts bar显示百分比

百度ECharts标题文字后面显示百分比

echarts中当数据为0时,bar也显示一小段,怎么设置比较好