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";                  // 全局引入echartscreateApp(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监听数据变化来做到实时更新。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！