vue3+echarts+折線投影(陰影)效果的實現(xiàn)

更新時間：2023年10月09日 10:20:18 作者：妍崽崽@

這篇文章主要介紹了vue3+echarts+折線投影(陰影)效果的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

折線投影效果的實現(xiàn)。

實現(xiàn)效果

實現(xiàn)方法

1.引入echart

cnpm i --save echarts
import * as echarts from 'echarts';

2.頁面上定義dom

<template>
  <div id="echartLine" class="echartDiv">
    折線圖
  </div>
</template>

3.具體實現(xiàn)代碼，series添加

 shadowColor: 'rgba(0, 0, 0, 1)',//設(shè)置折線陰影

源碼：

<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'));
        // 指定圖表的配置項和數(shù)據(jù)
        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)',//設(shè)置折線陰影
            shadowBlur: 15,
            shadowOffsetY: 20,
        }
    }
]
};
        // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
        myChart.setOption(option);
      }
      //掛載
      onMounted(()=>{
        nextTick(()=>{
          echartInit()
        })
      })
      return {
      };
    }
  }
</script>