我想弄成如图所示的。echarts 折线配置项内容和展示
你们能帮我修改下吗？谢谢 刚接触
配置项如下
// 指定图表的配置项和数据
options = {
color: ['red', 'green'],
title: {//标题颜色
text: '运维曲线图',
x: '48%',
top: '94%',
textStyle: {
fontSize:14,
color: '#444444'
}
},
tooltip: {//提示框组件
formatter: "{a} <br/>{b} : {c}%",
trigger: 'axis'
},//指示线字体颜色
legend: {
x: "43%",
bottom: '1%',
textStyle: {
color:'#000000',
},
data: ['报修', '维修']
},//xy轴大小
grid: {
left: '6%',
right: '2%',
top: '76%',
bottom: '6%',
containLabel: true
},
toolbox: {
"show": false,
feature: {
}
},
xAxis: {//x轴线颜色
type: 'category',
"axisLine": {
lineStyle: {
color: '#227700'
}
},
"axisTick": {
"show": false
},//X轴字体颜色
axisLabel: {
textStyle: {
color: '#000000'
}
},
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
"axisLine": {
lineStyle: {
color: '#227700'
}
},//网状线的颜色
splitLine: {
show: true,
lineStyle: {
color: 'gray'
}
},
"axisTick": {
"show": false
},//y轴字体颜色
axisLabel: {
textStyle: {
color: '#000000'
}
},
type: 'value'
},
series: [{
name: '报修',
smooth: true,
type: 'line',
symbolSize: 8,
symbol: 'circle',
data: [{value:20},{value:110},{value:80},{value:10},{value:60},{value:3},{value:30}]
}, {
name: '维修',
smooth: true,
type: 'line',
symbolSize: 8,
symbol: 'circle',
data: [{value:10},{value:110},{value:60},{value:10},{value:46},{value:3},{value:20}]
}, {
name: '故障率',
type: 'gauge',
z: 3,
radius: '25%',
center: ['85%', '60%'],
startAngle: 225,
endAngle: -45,
clockwise: true,
min: 0,
max: 100,
splitNumber: 10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 10
}
},
axisTick: { // 坐标轴小标记
length: 15, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
title : {
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic'
}
},
detail : {
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
}
},
data:[{value: 50, name: '故障率'},
]
},
{
name: '运维状态',
type: 'gauge',
radius:'35%',
center: ['55%', '66%'], // 默认全局居中
startAngle: 180,
endAngle: 0,
clockwise: true,
min: 0,
max: 100,
splitNumber: 10,
detail: {formatter:'{value}%'},
data: [{value: 50, name: '运维状态'}]
},
{
name: '修复率',
type: 'gauge',
radius:'25%',
center: ['25%', '60%'], // 默认全局居中
startAngle: 225,
endAngle: -45,
clockwise: true,
min: 0,
max: 100,
splitNumber: 10,
detail: {formatter:'{value}%'},
data: [{value: 50, name: '修复率'}]
}
]
}
setInterval(function (){
options.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
options.series[0].data[1].value = (Math.random()*100).toFixed(2) - 0;
options.series[0].data[2].value = (Math.random()*100).toFixed(2) - 0;
options.series[0].data[3].value = (Math.random()*100).toFixed(2) - 0;
options.series[0].data[4].value = (Math.random()*100).toFixed(2) - 0;
options.series[0].data[5].value = (Math.random()*100).toFixed(2) - 0;
options.series[0].data[6].value = (Math.random()*100).toFixed(2) - 0;
options.series[1].data[0].value = (Math.random()*100).toFixed(2) - 0;
options.series[1].data[1].value = (Math.random()*100).toFixed(2) - 0;
options.series[1].data[2].value = (Math.random()*100).toFixed(2) - 0;
options.series[1].data[3].value = (Math.random()*100).toFixed(2) - 0;
options.series[1].data[4].value = (Math.random()*100).toFixed(2) - 0;
options.series[1].data[5].value = (Math.random()*100).toFixed(2) - 0;
options.series[1].data[6].value = (Math.random()*100).toFixed(2) - 0;
options.series[2].data[0].value = (Math.random()*100).toFixed(2) - 0;
options.series[3].data[0].value = (Math.random()*100).toFixed(2) - 0;
options.series[4].data[0].value = (Math.random()*100).toFixed(2) - 0;
// option.series[5].data[0].value = (Math.random()*2).toFixed(2) - 0;
myChart.setOption(options,true);
},2000);
截图如下
