带你简单使用ECharts_v3当中使用ecarts-CSDN博客

本文链接：https://blog.csdn.net/qq_65142821/article/details/136762328

本文介绍了如何在Vue3应用中使用ECharts进行数据可视化，包括NPM安装、在模板中定义图表容器、引入库并创建基础图表实例，以及如何实现图表的自适应布局。

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

一、什么是ECarts

ECharts 是一款强大的开源数据可视化库，它是基于JavaScript构建的，旨在帮助开发者在Web应用程序中创建丰富且交互性极高的图表。ECharts由百度公司研发并开源，后来于2018年初被捐赠给Apache软件基金会，经过孵化阶段后，ECharts在2021年正式成为Apache顶级项目。

官网为：https://echarts.apache.org/zh/index.html

二、如何在vue3中使用ECarts

2.1 .NPM 安装 ECharts

npm install echarts --save

2.2 定义一个容器用来展示ECarts

<template>
  <!-- 首先定义一个容器 -->
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

2.3 引入ECarts 的包

// 引入echarts的包
import * as echarts from 'echarts';

2.4 源代码

<template>
  <!-- 首先定义一个容器 -->
  <div id="main" style="height:400px;"></div>
</template>


<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { uploadApi } from "@/api/index";
import { ElMessage } from "element-plus";
// 引入echarts的包
import * as echarts from 'echarts';
 onMounted(() => {
   initearchs();
 });
 const initearchs = () => {
  var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});
 };

</script>
 
<style scoped></style>