echarts 进度条类型柱状图

最新推荐文章于 2024-09-19 07:54:54 发布

Koreyoshi·

最新推荐文章于 2024-09-19 07:54:54 发布

阅读量798

点赞数 2

CC 4.0 BY-SA版权

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

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

在这里插入图片描述

父组件：

<barChartProfit :opt="avgProfit" />

import barChartProfit from "./components/barChartProfit";

data() {
   
   
	return {
   
   
		avgProfit: {
   
   
	        xData: ['2019', '2020', '2021', '2022', '2023'],
	        totalData: [30,30,30,30,30],
	        seriesData: [10,11,12,21,15]
	      }
	}
}

子组件：

<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 {
   
   }
      }
    }
  },
  data() {
   
   
    return {
   
   
      options: null
    }
  },
  watch: {
   
   
    opt: {
   
   
      deep: t