vue3+echarts+折线投影(阴影)效果的实现

 更新时间:2023年10月09日 10:20:18   作者:妍崽崽@  
这篇文章主要介绍了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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VueJs里利用CryptoJs实现加密及解密的方法示例

    VueJs里利用CryptoJs实现加密及解密的方法示例

    这篇文章主要介绍了VueJs里利用CryptoJs实现加密及解密的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue使用v-viewer插件实现图片预览和缩放和旋转等功能(推荐)

    Vue使用v-viewer插件实现图片预览和缩放和旋转等功能(推荐)

    v-viewer是一个基于viewerjs封装的vue图片预览组件,有预览缩放拉伸旋转切换拖拽等功能,支持配置化,这篇文章主要介绍了Vue使用v-viewer插件实现图片预览和缩放和旋转等功能,需要的朋友可以参考下
    2023-02-02
  • 实例讲解Vue.js中router传参

    实例讲解Vue.js中router传参

    本篇文章通过实例给大家分析了Vue.js中router传参的相关知识点,对此有兴趣的朋友参考学习下。
    2018-04-04
  • Vuex简单入门

    Vuex简单入门

    本篇文章主要介绍了初步认识理解Vuex,Vuex就是在一个项目中,提供唯一的管理数据源的仓库,有兴趣的可以了解一下
    2017-04-04
  • vue动态禁用控件绑定disable的例子

    vue动态禁用控件绑定disable的例子

    今天小编就为大家分享一篇vue动态禁用控件绑定disable的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue中的文字换行问题

    Vue中的文字换行问题

    这篇文章主要介绍了Vue中的文字换行问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue中keep-alive组件的原理与缓存详解

    Vue中keep-alive组件的原理与缓存详解

    Vue 的 keep-alive 是一个内置组件,用于缓存不活动的组件实例,避免重复渲染,从而优化应用性能,下面就跟随小编一起来看看其核心实现原理和缓存内容吧
    2025-03-03
  • Vue实现点击显示不同图片的效果

    Vue实现点击显示不同图片的效果

    这篇文章主要为大家详细介绍了Vue实现点击显示不同图片的效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • 在Vue中延迟执行某个函数的实现方式

    在Vue中延迟执行某个函数的实现方式

    在Vue中延迟执行某个函数,你可以使用setTimeout()函数或者Vue提供的生命周期钩子函数,本文通过一些示例代码给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-12-12
  • 浅谈vue websocket nodeJS 进行实时通信踩到的坑

    浅谈vue websocket nodeJS 进行实时通信踩到的坑

    这篇文章主要介绍了浅谈vue websocket nodeJS 进行实时通信踩到的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论