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监听数据变化来做到实时更新。
