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

2022-02-28 17:02:04 阅读：319 来源： 互联网

标签：color echarts 折线 rgba vue3 lineStyle 107

前言：

折线投影效果的实现。

实现效果：

实现方法：

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>

标签：color,echarts,折线,rgba,vue3,lineStyle,107
来源： https://blog.csdn.net/weixin_44727080/article/details/123186402

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9