initChart(canvas, width, height, dpr) {
const max = 100;
const min = 25;
const interval = 25;
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
canvas.setChart(chart);
let option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'none' // 默认为直线,可选为:'line' | 'shadow'
},
formatter(p) {
return p[0].data.showText
}
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true,
lineStyle: {
color: ['#ffffff']
}
},
axisLine:{
lineStyle:{
color: '#eeeeee'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#666666'
}
},
splitLine: {
show: true,
lineStyle:{
color: ['#eeeeee'],
width: 1,
type: 'solid'
}
}
}
],
yAxis: [
{
max,
min,
type: 'value',
show: true,
interval,
axisTick: {
show: false
},
axisLine: { // 坐标轴轴线相关设置
show: false, // 是否显示坐标轴轴线
},
axisLabel: {
show: true,
textStyle: {
color: '#666666'
},
formatter(value) {
return value + '%'
}
},
splitLine: {
show: true,
lineStyle:{
color: ['#eeeeee'],
width: 1,
type: 'solid'
}
}
}
],
series: [
{
symbolSize: 8,
symbol: 'circle',
type: 'line',
barWidth: '60%',
data: [{
showText: '残值率:20-15万\n残值估算:8家',
name: 'hello',
value: 75
}, 100, 80, 45, 65],
lineStyle: {
color: '#00B8B0',
lineWidth: 2
},
itemStyle: {
color: '#00B8B0'
},
areaStyle: {
normal: {
label: {
show: false,
},
color: new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{
offset: 0,
color: '#00B8B0'
}, {
offset: 1,
color: '#ffffff'
}])
}
}
}
],
};
chart.setOption(option);
this.eChart = chart;
return chart;
}