vue3+echarts+折线投影(阴影)效果的实现
作者：妍崽崽@
这篇文章主要介绍了vue3+echarts+折线投影(阴影)效果的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
折线投影效果的实现。
实现效果
实现方法
1.引入echart
cnpm i --save echarts import * as echarts from 'echarts';
2.页面上定义dom
<template>
<div id="echartLine" class="echartDiv">
折线图
</div>
</template>3.具体实现代码，series添加
shadowColor: 'rgba(0, 0, 0, 1)',//设置折线阴影
源码：
<template>
<div id="echartLine" class="echartDiv" style="width: 100%;height: 400px;">
</div>
</template>
<script>
import * as echarts from 'echarts';
import { onMounted,nextTick } from 'vue';
export default {
setup(){
const echartInit = () =>{;
var myChart = echarts.init(document.getElementById('echartLine'));
// 指定图表的配置项和数据
let option = option = {
grid: {
top: '15%',
right: '10%',
left: '10%',
bottom: '12%'
},
xAxis: [{
type: 'category',
color: '#59588D',
data: ['2019Q1', '2019Q2', '2019Q3', '2019Q4'],
axisLabel: {
margin: 20,
color: '#999',
textStyle: {
fontSize: 18
},
},
axisLine: {
lineStyle: {
color: 'rgba(107,107,107,0.37)',
}
},
axisTick: {
show: false
},
}],
yAxis: [{
axisLabel: {
formatter: '{value}%',
color: '#999',
textStyle: {
fontSize: 18
},
},
axisLine: {
lineStyle: {
color: 'rgba(107,107,107,0.37)',
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(131,101,101,0.2)',
type: 'dashed',
}
}
}],
series: [{
data: [48, 40, 10, -6],
type: 'line',
smooth: true,
name: '折线图',
symbol: 'none',
lineStyle: {
color: '#3275FB',
width: 4,
shadowColor: 'rgba(0, 0, 0, 1)',//设置折线阴影
shadowBlur: 15,
shadowOffsetY: 20,
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
//挂载
onMounted(()=>{
nextTick(()=>{
echartInit()
})
})
return {
};
}
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。