echarts 折线图加阴影

最新推荐文章于 2024-07-01 14:31:36 发布

Koreyoshi·

最新推荐文章于 2024-07-01 14:31:36 发布

阅读量915

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/Koreyoshi123654/article/details/135059403

在这里插入图片描述

父组件：

<lineChartIncome :opt="tradeIncome" />

import lineChartIncome from "./components/lineChartIncome";

data() {
   
   
	return {
   
   
		tradeIncome: {
   
   
	        seriesData: [[20, 14, 17,30,24], [12, 14, 15,40,50]],
	        xData: ['2019', '2020', '2021', '2022', '2023'],
	        legend: ['年营业收入', '完成收款额']
	      }
	}
}

子组件：

<template>
  <div style="width: 100%;height: 100%;">
    <ChartPanel ref="chart" :option="options" :style="opt.yAxisName ? 'height:calc(100% - 16px)' : ''"></ChartPanel>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import ChartPanel from '@/components/ChartPanel';
export default {
   
   
  components: {
   
   
    ChartPanel
  },
  props: {
   
   
    opt: {
   
   
      type: Object,
      default() {
   
   
        return {
   
   }
      }
    }
  },