vue使用v-chart的实践心得

开发Vue2和Vue3时，我们常常需要将数据以图表的形式展示给用户，而 V-Chart 作为一个轻量级且易于集成的图表库，是 Vue 开发的首选。这篇文章，我将写一下关于我在使用这方面的心得。

echarts官网：https://echarts.apache.org/examples/zh/index.html
v-chart：https://github.com/ecomfe/vue-echarts

-------------------------------------------------------- 后续，我会持续补充内容进来

安装与配置（vue3举例）

npm install vue-echarts echarts --save

安装完成后，在需要使用图表的组件中引入并注册 V-Chart 组件：效果实例

<script lang="ts" setup name="lineCharts">
const chartsLineOptionQPS = ref({title: {text: '折线图'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '35px',right: '35px',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Email',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210],},{name: 'Union Ads',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [320, 332, 301, 334, 390, 330, 320]}]
})
</script>

在模板中使用 v-chart 组件来渲染图表：

<template><v-chart :options="chartData"></v-chart>
</template>

使用技巧与实践

使用v-chart很方便使用，具体的图表配置如折线、饼图等，直接copy官网charts的配置数据就可以。但是也有些特殊的情况需要处理，如下：（后续，我会持续补充内容进来）

1、v-chart随屏幕自动调整图表大小：autoresize

echarts图表设置自适应，使用这个参数，我们就不需要自己监听屏幕resize变化了。

<v-chart :option="option" autoresize />

2、v-chart动态数据及时响应：notMerge:true

vue如何使用v-chart组件，没有及时更新数据。

<v-chart :option="option" autoresize :update-options="{notMerge:true}"/>

其他详见：https://github.com/ecomfe/vue-echarts