<div id="myChart"></div>
this.drawLine();
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
//用formatter回调函数显示多项数据内容
tooltip: {
trigger: 'axis',
formatter: function(params, ticket, callback) {
var htmlStr = '';
var valMap = {};
for (var i = 0; i < params.length; i++) {
var param = params[i];
var xName = param.name; //x轴的名称
var seriesName = param.seriesName; //图例名称
var value = param.value; //y轴值
var color = param.color; //图例颜色
//过滤无效值
if (value == '-') {
continue;
}
//过滤重叠值
if (valMap[seriesName] == value) {
continue;
}
// if (i === 0) {
// htmlStr += xName + '<br/>'; //x轴的名称
// }
htmlStr += '<div>';
//为了保证和原来的效果一样，这里自己实现了一个点的效果
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
//圆点后面显示的文本
htmlStr += seriesName + '：' + value;
htmlStr += '</div>';
valMap[seriesName] = value;
}
return htmlStr;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(30,30,30,0.3)', //左边线的颜色
}
},
axisLabel: {
show: true,
color: 'rgba(30,30,30,0.67)',
},
axisTick: {
show: false
},
data: [{ value: '一月' }, { value: '二月' }, { value: '三月' }, { value: '四月' }, { value: '五月' }, {
value: '当前',
textStyle: {
color: '#ff1010'
}
}, { value: '下月' }]
},
yAxis: [{
type: 'value',
axisLabel: {
formatter: '{value}',
textStyle: {
color: 'rgba(30,30,30,0.3)'
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: 'rgba(30,30,30,0.3)', //左边线的颜色
}
},
lineStyle: {
type: 'solid',
color: 'rgba(30,30,30,0.3)',
},
axisLine: {
show: false
},
axisTick: {
show: false
},
}],
series: [{
name: '品鉴值',
type: 'line',
data: [500, 1200, 800, 1800, 1900, 1900, "-"],
symbol: 'none',
smooth: false,
itemStyle: {
normal: {
color: '#ff7575',
},
},
lineStyle: {
color: '#ff7575'
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0.6,
color: 'rgba(255,201,201,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(255,248,201,0.5)' // 100% 处的颜色
}]),
},
},
markPoint: {
symbol: 'rect',
symbolSize: [35, 20],
symbolOffset: [0, -25],
itemStyle: {
color: '#ff5b82'
},
data: [{
coord: [5, 1900],
value: 1900,
}]
},
markLine: {
symbol: 'none', //去掉箭头
lineStyle: {
color: 'rgba(175,175,175,0.3)'
},
data: [
[
{ coord: ['当前', 0] },
{ coord: ['当前', 1900] }
]
]
},
},
{
name: '品鉴值',
type: 'line',
symbolSize: 8,
smooth: false, //关键点，为true是不支持虚线，实线就用true
itemStyle: {
normal: {
color: '#ff5b82',
borderWidth: 4,
lineStyle: {
width: 2,
type: 'dotted', //'dotted'虚线 'solid'实线,
color: '#ff5b82'
}
}
},
emphasis: { // 鼠标经过时：
itemStyle: {
borderType: 'solid'
}
},
data: [
{ value: "-" },
{ value: "-" },
{ value: "-" },
{ value: "-" },
{ value: "-" },
{ value: 1900 },
{
value: 2000,
label: {
show: true
}
}
]
}
]
});
}