如何修改timeline样式
来源：16-3 数据大屏整体布局开发
前端工程师666777888
2020-12-18
请问老师
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#echartsCon {
width: 600px;
height: 300px;
margin: 30px auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="echartsCon"></div>
<script src="./echarts.min.js"></script>
<script type="text/javascript">
var echartDom = document.getElementById('echartsCon');
var myChartEle = echarts.init(echartDom);
var eleOptions = {
baseOption: {
timeline: {
axisType: 'category',
autoPlay: true,
playInterval: 7000,
data: ['待办工单统计', '各地市用户数'],
label: {
formatter: function(s) {
return s
}
},
checkpointStyle: {
symbolSize: 13,
color: '#3398DB',
borderWidth: 0,
symbol: 'rect'
},
lineStyle: {
show: false
},
controlStyle: {
show: false
},
width: '20%',
height: 28,
left: '40%',
right: '40%'
},
color: ['#3398DB'],
grid: {
top: 30,
bottom: 40,
left: 10,
right: 10,
containLabel: true
},
title: {
textStyle: {
fontSize: 12
},
y: 'top',
textAlign: 'left',
x: 'center'
},
xAxis: {
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
color: '#000'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
axisTick: {
alignWithLabel: true,
lineStyle: {
color: '#999'
}
},
},
yAxis: {
axisLabel: {
color: '#000'
},
axisTick: {
lineStyle: {
color: '#999'
}
},
axisLine: {
lineStyle: {
color: '#999'
}
},
splitLine: {
lineStyle: {
type: 'dotted',
color: '#ccc'
}
}
},
series: [{
name: '待办工单统计',
type: 'bar'
}, {
name: '各地市用户数',
type: 'bar'
}]
},
options: [
{
title: {
text: '待办工单统计'
},
xAxis: {
data: ['施工管理', '核查工单', '工程预约', '4G性能管理', '个人投诉', '集客投诉', '家客投诉', '需求管理'],
axisLabel: {
formatter: function(value, index) {
switch (index) {
case 0:
return '施工管理';
break;
case 1:
return '核查工单';
break;
case 2:
return '工程预约';
break;
case 3:
return '4G性能管理';
break;
case 4:
return '个人投诉';
break;
case 5:
return '集客投诉';
break;
case 6:
return '家客投诉';
break;
case 7:
return '需求管理';
break;
}
}
}
},
yAxis: {
max: 10,
},
series: [{
data: [6, 4, 2, 4, 3, 6, 5, 2],
barWidth: '50%',
label: {
show: true,
position: 'top'
}
}],
tooltip: {
formatter: '{b}<br/>待办数量为:{c}个'
}
},
{
title: {
text: '各地市用户数'
},
xAxis: {
data: ['施工管理', '核查工单', '工程预约', '4G性能管理', '个人投诉', '集客投诉', '家客投诉', '需求管理'],
axisLabel: {
formatter: function(value, index) {
switch (index) {
case 0:
return '呼和浩特市';
break;
case 1:
return '包头市';
break;
case 2:
return '乌海市';
break;
case 3:
return '赤峰市';
break;
case 4:
return '通辽市';
break;
case 5:
return '鄂尔多斯市';
break;
case 6:
return '巴彦淖尔市';
break;
case 7:
return '乌兰察布市';
break;
}
}
}
},
yAxis: {
max: 3000,
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 2620, 2300],
barWidth: '50%',
label: {
show: true,
position: 'top'
}
}],
tooltip: {
formatter: function(params, ticket) {
switch (params.dataIndex) {
case 0:
return '呼和浩特市' + '用户数为:<br/>' + params.value + '人';
break;
case 1:
return '包头市' + '用户数为:<br/>' + params.value + '人';
break;
case 2:
return '乌海市' + '用户数为:<br/>' + params.value + '人';
break;
case 3:
return '赤峰市' + '用户数为:<br/>' + params.value + '人';
break;
case 4:
return '通辽市' + '用户数为:<br/>' + params.value + '人';
break;
case 5:
return '鄂尔多斯市' + '用户数为:<br/>' + params.value + '人';
break;
case 6:
return '巴彦淖尔市' + '用户数为:<br/>' + params.value + '人';
break;
case 7:
return '乌兰察布市' + '用户数为:<br/>' + params.value + '人';
break;
}
}
}
}
]
};
myChartEle.setOption(eleOptions);
</script>
</body>
</html>
1回答
-
扬_灵
2020-12-18
同学你好，关于坐标轴刻度没有显示在中间是因为你在baseOption->series中配置了两个对象，里面的内容虽然没有显示但是坐标轴上会显示两个bar，将代码修改成下面的格式就可以了，或者你可以在baseOption中增加legend显示图例，就可以看出效果。
series: [ { type: "bar" }, ]设置小圆点的样式可以直接在timeline中直接设置就可以了，这里也提供了symbol，symbolSize和itemStyle属性。
00
相似问题