Vue3.2 + Echarts 入门（一）

maplea2012

已于 2023-10-31 21:29:08 修改

阅读量165

点赞数

分类专栏： Vue 文章标签：笔记

于 2023-06-18 01:07:58 首次发布

本文链接：https://blog.csdn.net/weixin_37901366/article/details/131157944

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何搭建Vue3.2项目环境，包括初始化、安装依赖如vue-router、axios和element-plus，以及引入和使用Echarts。然后提供了一个Echarts的入门案例，展示了在Vue中创建和设置Echarts图表的基本步骤。

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

一、Vue环境搭建

1、初始化环境

D:\03-study\Html\vue_project\vue3.2>npm init vite@3.0.2

2、安装依赖

D:\03-study\Html\vue_project\vue3.2\weatherdashboard>npm install

3、引入一些其它的组件（重点是echarts）

D:\03-study\Html\vue_project\vue3.2\weatherdashboard>npm i vue-router@4 -S

D:\03-study\Html\vue_project\vue3.2\weatherdashboard>npm i axios -S

D:\03-study\Html\vue_project\vue3.2\weatherdashboard>npm i echarts -S

D:\03-study\Html\vue_project\vue3.2\weatherdashboard>npm install element-plus --save

4、需要使用额外的插件来导入要使用的组件

D:\03-study\Html\vue_project\vue3.2\weatherdashboard>npm install unplugin-vue-components

5、启动vue

npm run dev

二、Echarts入门案例

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import {ref, reactive, onMounted} from "vue";
import * as echarts from "echarts";

const chart = ref();
onMounted(()=>{
  let mychart = echarts.init(chart.value)
  var option = {

    xAxis: {
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {},
    series: [
      {
        data: [10, 22, 28, 43, 49],
        type: 'line',
        stack: 'x'
      },
      {
        data: [5, 4, 3, 5, 10],
        type: 'line',
        stack: 'x'
      }
    ]
    };

  mychart.setOption(option)

})


</script>

<template>
  <!--<div>-->
  <!--  <a href="https://vitejs.dev" target="_blank">-->
  <!--    <img src="/vite.svg" class="logo" alt="Vite logo" />-->
  <!--  </a>-->
  <!--  <a href="https://vuejs.org/" target="_blank">-->
  <!--    <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />-->
  <!--  </a>-->
  <!--</div>-->
  <!--<HelloWorld msg="Vite + Vue" />-->
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div ref="chart" style="width: 600px;height:400px;"></div>


</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>