最近在做大屏数据展示,样式真的超级好看。但是细节处理也是比较麻烦的。
最终效果图如下:
下面对我遇到的几个知识点进行汇总:
1. 横向的柱状图——设置yAxis
的type
为category
即可
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '-80',
right: '40',
bottom: '0',
top: '10',
containLabel: true
},
xAxis: {
type: 'value',
show: false,
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
show: false,
},
series: [
{
name: '',
type: 'bar',
data: data,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: 'transparent'
},
{
offset: 1,
color: '#f90'
}
]),
label: {
normal: {
show: true,
position: 'right',
formatter: '{c}',
color: '#fff'
}
},
barWidth: 20,
}
]
};
dom.setOption(option);
下面详细解析:
1.1 标题——title
title: {
text: '',//主标题
subText:'',//副标题
},
1.2 输入移入的效果——tooltip
下面是最简单的效果了,如果需要复杂的效果,需要单独设置
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},