vue3 echarts5

最新推荐文章于 2024-08-08 00:23:29 发布

原创最新推荐文章于 2024-08-08 00:23:29 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

web 专栏收录该内容

3 篇文章

订阅专栏

本文档展示了如何使用Vue3和Vite搭建项目，并集成ECharts5来创建柱状图和折线图。首先通过npm初始化Vite项目，安装Vue3和ECharts，然后在模板中引入ECharts并设置图表配置，最终成功展示柱状图和折线图。

vue3 echarts5

vue3 vite 建立项目

C:\>npm init vite@latest ve1 -- --template vue

Scaffolding project in C:\ve1...

Done. Now run:

  cd ve1
  npm install
  npm run dev


C:\>cd ve1

C:\ve1>npm install

added 32 packages in 4s

C:\ve1>npm i echarts --save

added 3 packages in 4s

C:\ve1>npm info vue version
3.2.31

C:\ve1>npm ls
ve1@0.0.0 C:\ve1
+-- @vitejs/plugin-vue@2.2.4
+-- echarts@5.3.0
+-- vite@2.8.6
`-- vue@3.2.31

自动动项目

package.json vite --open

{
  "name": "ve1",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --open",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "echarts": "^5.3.0",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "vite": "^2.8.0"
  }
}

c:\ve1>npm run dev
vite v2.8.6 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 385ms.

柱形图

<template>
<div ref="cc" style="width:100%;height: 400px;margin:0 auto"></div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import * as charts from 'echarts'
let cc = ref()
onMounted(()=>{
  let cs = charts.init(cc.value)
  let opt = {
    title:{
      text: 'Echarts 入门示例'
    },
    tooltip:{},
    legend:{
      data:['数量']
    },
    xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子','手套','帽子']},
    yAxis:{},
    series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20,50,80]}]
  }
  cs.setOption(opt)
})
</script>

<style scoped>

</style>

<template>
  <div ref="echart" class="echartDiv"></div>
  <h3 ref="hh"></h3>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from 'vue';
let echart = ref();
let hh = ref();
onMounted(()=>{
  hh.value.innerHTML='hello'
  let myChart = echarts.init(echart.value);
  // 指定图表的配置项和数据
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption({
    tooltip: {},
    legend: {
      data: ['会员登录次数']
    },
    xAxis: {
      data: ['浩星', '妍仔', '哆啦a梦', '李强', '王颖', '老王']
    },
    yAxis: {},
    series: [{
      name: '会员登录次数',
      type: 'bar',
      data: [4, 22, 1, 11, 23, 11]
    }]
  });
})

</script>

<style scoped>
.echartDiv {
  width: 100%;
  height: 400px;
}
</style>

折线图

<template>
  <div id="e1" :style="{width: '100%', height: '550px'}"></div>
</template>

<script setup>
import {onMounted} from "vue";
import * as echarts from 'echarts'
onMounted(() => {
  //需要获取到element,所以是onMounted的Hook
  let myChart = echarts.init(document.getElementById("e1"));
  // 绘制图表
  myChart.setOption({
    title: { text: "总用户量" },
    tooltip: {},
    xAxis: {
      data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
    },
    yAxis: {},
    series: [
      {
        name: "用户量",
        type: "line",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  })
})
</script>
<style>
</style>