网站项目设计,安徽合肥做网站的公司有哪些,pr值高的网站,网站建设资费开发Vue2和Vue3时#xff0c;我们常常需要将数据以图表的形式展示给用户#xff0c;而 V-Chart 作为一个轻量级且易于集成的图表库#xff0c;是 Vue 开发的首选。这篇文章#xff0c;我将写一下关于我在使用这方面的心得。
echarts官网#xff1a;https://echarts.apach…开发Vue2和Vue3时我们常常需要将数据以图表的形式展示给用户而 V-Chart 作为一个轻量级且易于集成的图表库是 Vue 开发的首选。这篇文章我将写一下关于我在使用这方面的心得。
echarts官网https://echarts.apache.org/examples/zh/index.html v-charthttps://github.com/ecomfe/vue-echarts
-------------------------------------------------------- 后续我会持续补充内容进来
安装与配置vue3举例
npm install vue-echarts echarts --save安装完成后在需要使用图表的组件中引入并注册 V-Chart 组件效果实例
script langts setup namelineCharts
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 组件来渲染图表
templatev-chart :optionschartData/v-chart
/template使用技巧与实践
使用v-chart很方便使用具体的图表配置如折线、饼图等直接copy官网charts的配置数据就可以。但是也有些特殊的情况需要处理如下后续我会持续补充内容进来
1、v-chart随屏幕自动调整图表大小autoresize
echarts图表设置自适应使用这个参数我们就不需要自己监听屏幕resize变化了。
v-chart :optionoption autoresize /2、v-chart动态数据及时响应notMerge:true
vue如何使用v-chart组件没有及时更新数据。
v-chart :optionoption autoresize :update-options{notMerge:true}/其他详见https://github.com/ecomfe/vue-echarts
