let echarts = require('echarts')
let myChart = echarts.init(document.getElementById('my_line'))
myChart.setOption({
grid: {
show: false,
top: '15%',
left: '1%',
right: '5%',
bottom: '0%',
containLabel: true
},
tooltip:{
trigger: 'axis', // 触发类型,默认数据触发,可选为:'axis' item
axisPointer: {
type: "line", // 默认为直线,可选为:'line' | 'shadow'
label:'cross',
show:true
},
},
legend: {
data: ['评分', '采集数', '问题数'],
textStyle: {
fontSize: 12,
color: 'rgba(44, 53, 66, 0.45)'
},
itemWidth:20,//图例的宽度
itemHeight:0,//图例的高度
},
xAxis: {
type: 'category',
data: ['3/1','3/2','3/3','3/4','3/5'],
splitLine:{
show:true,
lineStyle: {
color: ['#fafafa']
}
},
axisLine: {
lineStyle: {
color: 'rgba(44, 53, 66, 0.45)',
width: 0,
},
},
//刻度线
axisTick: {
show: true,
lineStyle: {
color: ['rgba(44, 53, 66, 0.45)']
}
},
},
yAxis:[
{
type: 'value',
name: '评分',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %'
},
// splitLine:{
// show:true,
// lineStyle: {
// color: ['#fafafa']
// }
// },
axisLine: {
lineStyle: {
color: 'rgba(44, 53, 66, 0.45)',
width: 1,
}
},
axisTick: {
show: true,
lineStyle: {
color: ['rgba(44, 53, 66, 0.45)']
}
},
},
{
type: 'value',
name: '采集数',
min: 0,
max: 100,
interval: 20,
// splitLine:{
// show:true,
// lineStyle: {
// color: ['#fafafa']
// }
// },
axisLine: {
lineStyle: {
color: 'rgba(44, 53, 66, 0.45)',
width: 1,
}
},
axisTick: {
show: true,
lineStyle: {
color: ['rgba(44, 53, 66, 0.45)']
}
},
},
{
type: 'value',
name: '问题数',
min: 0,
max: 100,
// interval: 20,
offset: 60,
// splitLine:{
// show:true,
// lineStyle: {
// color: ['#fafafa']
// }
// },
axisLine: {
lineStyle: {
color: 'rgba(44, 53, 66, 0.45)',
width: 1,
}
},
axisTick: {
show: true,
lineStyle: {
color: ['rgba(44, 53, 66, 0.45)']
}
},
},
],
series: [{
name: '评分',
data: [11,22,33,44,55],
type: 'line',
smooth:true,
// symbol: 'circle',
itemStyle:{
normal:{
color:'#5B8FF9', //折点颜色
lineStyle:{
color:'#5B8FF9' //折线颜色
}
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#5B8FF9'
}, {
offset: 1,
color: '#ffffff'
}])
}
},{
name: '采集数',
data: [22,33,44,55,66],
type: 'line',
smooth:true,
// symbol: 'circle',
itemStyle:{
normal:{
color:'#5BD171', //折点颜色
lineStyle:{
color:'#5BD171' //折线颜色
}
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#5BD171'
}, {
offset: 1,
color: '#ffffff'
}])
}
},{
name: '问题数',
data: [44,55,66,77,88],
type: 'line',
smooth:true,
// symbol: 'circle',
itemStyle:{
normal:{
color:'#FA8C16', //折点颜色
lineStyle:{
color:'#FA8C16' //折线颜色
}
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FA8C16'
}, {
offset: 1,
color: '#ffffff'
}])
}
}]
});
|