记一个简单的关于轴线和toolip图表配置
getEcharts(xAxisData, analysisData) {
// console.log(analysisData,"数据");
var chart = this.$echarts.init(this.$refs.classEcharts)
let option = {
tooltip: {
trigger: 'axis',
className: 'echarts-tooltip',
backgroundColor:"rgba(0,0,0,.8)",
formatter: function(params) {
// console.log(params,"params");
var result = "<div style='padding:5px 10px;'>"+params[0].name+'<br>'+"</div>";
params.forEach(function(item,index) {
if(item.seriesName=='课程训练次数'){
result +="<div style='padding:5px 10px'>"+item.seriesName+" : "+'<span style="color:#5C9DFF">'+ item.value+"次</span><br>"+'</div>'
}else{
result +="<div style='padding:5px 10px'>"+item.seriesName+" : "+'<span style="color:#14C9C9">'+ item.value+"%</span><br>"+'</div>'
}
});
return result;
}
},
grid: {
left: "4%",
right: "5%"
},
legend: {
data: [
{
name: "课程训练次数",
icon: "circle",
color: "#165DFF",
},
{
name: "课程进度",
icon: "circle",
color: "#14C9C9 ",
},
],
},
xAxis: {
type: 'category',
axisLabel: {
show: true, //这里的show用于设置是否显示y轴下的字体 默认为true
textStyle: {
//textStyle里面写y轴下的字体的样式
color: '#0072DB',
fontSize: 12,
},
formatter: '{value}',
},
axisLine: {
show: true,
lineStyle: {
color: '#0072DB', // 设定 y 轴线的颜色
width: 1, // 设定 y 轴线的宽度
type: 'solid' // 设定 y 轴线的类型，可选：'solid', 'dashed', 'dotted'
}
},
boundaryGap: false,
data: xAxisData
},
yAxis: [
{
type: 'value',
name: "课程训练次数",
nameTextStyle: {
color: "#666666",
fontSize: 12,
},
axisLabel: {
show: true,
textStyle: {
//textStyle里面写y轴下的字体的样式
color: '#0072DB',
fontSize: 12,
},
formatter: '{value}'
},
axisTick: { // 坐标轴刻度
show: false // 不显示刻度
},
axisLine: {
show: true,
lineStyle: {
color: '#0072DB', // 设定 y 轴线的颜色
width: 1, // 设定 y 轴线的宽度
type: 'solid' // 设定 y 轴线的类型，可选：'solid', 'dashed', 'dotted'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#0072DB',
type: 'dotted',
}
}
}, {
type: 'value',
name: "课程进度",
nameTextStyle: {
color: "#666666",
fontSize: 12,
},
min: 0,
max: 100,
interval: 20,
axisLabel: {
show: true, //这里的show用于设置是否显示y轴下的字体 默认为true
textStyle: {
//textStyle里面写y轴下的字体的样式
color: '#0072DB',
fontSize: 12,
},
formatter: '{value}%',
},
axisLine: { // 坐标轴线
show: false, // 默认显示，设为false则代表不显示
},
axisTick: { // 坐标轴刻度
show: false // 不显示刻度
},
splitLine: {
show: false,
lineStyle: {
color: '#0072DB',
type: 'dotted',
}
}
}],
series: [
{
name: '课程训练次数',
type: 'line',
data: analysisData[0].data,
color: "#165DFF",
yAxisIndex: 0
},
{
name: '课程进度',
type: 'line',
data: analysisData[1].data,
color: "#14C9C9 ",
yAxisIndex: 1
}
]
};
chart.setOption(option);
},
