该示例有如下几个特点:
①三角锥形+折线图
②折线图自带阴影
③三角锥形鼠标放置时颜色改变
④数据随着鼠标移动而展示
⑤鼠标放置时tooltip样式自定义(echarts 实现tooltip提示框样式自定义-CSDN博客)
代码如下:
this.options = {
animation: true,
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
textStyle: {
align: "left",
},
className: "custom-tooltip-box",
formatter: function (params) {
return `<div class='custom-tooltip-style'>
<span>${params[0].name}年</span></br>
<div class="span">
<span>缺材停飞:</span>
<span>${params[0].value}件</span>
</div>