vue3关于Echarts的基本使用及配置

ECharts

1.Echarts的基本使用及配置

1.1Echarts在vue3中的配置

echarts的官方使用文档

https://echarts.apache.org/handbook/zh/get-started/

按照文档所说，使用前先安装echarts包，通过npm的方式安装

npm install echarts --save

安装完成后去github上搜索vue echarts，找到stars最高的那个，点击进入。

进入后下面会有一个说明文档，点击中文版的说明文档，找到【安装和使用】一栏，安装vue echarts工具包，下面是安装方式

npm install echarts vue-echarts

安装完成后，找到对应的vue版本选项，这里选择vue3，以下是注册方式：

import { createApp } from 'vue'
import ECharts from 'vue-echarts'
import { use } from "echarts/core";

// 手动引入 ECharts 各模块来减小打包体积
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent
]);

const app = createApp(...)

// 全局注册组件（也可以使用局部注册）
app.component('v-chart', ECharts)

app.mount(...)

为了更小的打包体积，我们建议手动从 ECharts 引入单个图表和组件。

但如果你实在需要全量引入 ECharts 从而无需手动引入模块，只需要在代码中添加：

import "echarts";

以下是vue3中的使用demo:

main文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'       

import ECharts from 'vue-echarts'  // 引入ECharts
import "echarts";                  // 全局引入echarts


createApp(App)
.component('ECharts',ECharts)    // 挂载ECharts   参数1:vue文件中挂载echarts的名字  参数2:挂载的组件
.mount('#app')

说明：

• import ECharts from ‘vue-echarts’ // 引入ECharts
• import “echarts”; // 全局引入echarts
• component(‘ECharts’,ECharts) // 挂载ECharts 参数1:vue文件中挂载echarts的名字 参数2:挂载的组件，也就是上面引入ECharts的组件名

vue文件

<template>
<div>
  <e-charts class="chart" :option="option" />   
</div>

</template>

<script setup>
import { ref,computed } from 'vue'

const data = ref([
    {value:67,name:'A'},
    {value:40,name:'B'},
    {value:120,name:'C'},
    {value:58,name:'D'},
    {value:85,name:'E'},
])

setInterval(()=>{
   data.value = data.value.map(item=>({
    ...item,
    value:Math.random()*100,
   }))
},1000)

const option = computed(()=>{
    return {
        xAxis: {
            type: 'category',
            data: data.value.map(el=>el.name)
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: data.value.map(el=>el.value),
            type: 'line'
            }
        ]

    }
})

     

</script>

<style scoped>
.chart {
  height: 400px;
}
</style>

说明：

• e-charts为main文件挂载的名字 ECharts -->
• vue3的响应式数据需要使用ref或者reactive，echarts的数据是放在options里面的，所以这里的数据使用了map映射data里的值，然后通过computed监听数据变化来做到实时更新。