Vue如何使用ECharts

最新推荐文章于 2024-07-05 10:34:38 发布

凉爽爽爽爽爽爽爽爽爽

最新推荐文章于 2024-07-05 10:34:38 发布

阅读量2.4k

点赞数 2

分类专栏： vue 笔记文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_45770253/article/details/117594760

版权

本文介绍了在Vue项目中如何使用ECharts，包括安装依赖、创建Vue组件、引入ECharts库，以及如何从ECharts官网获取并应用图表配置。通过复制官网示例代码到组件的setOption方法中，即可实现图表展示。鼓励读者参照ECharts官方文档进行深入学习。

摘要由CSDN通过智能技术生成

Vue如何使用ECharts

安装echarts依赖

   npm install echarts --save

新建两个vue文件
在子组件中先引用echarts

<sript>
  import * as echarts from "echarts";
  require("echarts/theme/macarons"); // echarts theme
<script>

或者可以直接复制我下面的代码（只要安装了echarts包之后，可以直接复制使用）：

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

export default {
   
  props: {
   
    className: {
   
      type: String,
      default: 'chart'
    },
    width: {
   
      type: String,
      default: '100%'
    },
    height: {
   
      type: String,
      default: '300px'
    }
  },
  data() {
   
    return {
   
      chart: null
    }
  },
  mounted()<