最近做到了统计,用到了echart,做了一个简单的例子
先来看最终的效果图
option:{
title : {
text: '送检按时完成率',
subtext: '数据来自xxxx有限公司',
x: 'center',
align: 'right'
},//标题
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu',]
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#000000',
fontSize: '100%',
},
interval: 0,
showMinLabel: true,
formatter: '{value} %'
},//让纵坐标按百分比显示
},
series: [{
data: [100, 20, 15, 80,],
type: 'bar',
itemStyle:{
normal:{
color:'#00a0e9'
}
},//柱形颜色
barWidth:70,//柱形宽度
}],
tooltip: {
trigger: 'item',
formatter:'{c}%'//柱状图 百分比显示
},
},
1.首先是标题的展示:title中的align是文字对齐方式。
2.柱状图纵坐标按百分比显示:用到了yAxis里的axisLabel,具体代码如上。
3.柱形颜色和柱形宽度:分别是series里的itemStyle和barWidth(宽度为数字)。
4.当鼠标滑过每个柱形时的具体数据也按百分比显示:用到的是tooltip里的formatter,具体写法如上所示。