使用vue实现柱形图的方法:1、创建div属性为“
”;2、通过“mounted(){this.fetchData()window.addEventListener('resize',()=>{if (this.chart){...}”实现立体柱状图即可。
本教程操作环境:Windows10系统、vue3版、DELL G3电脑
怎么使用vue实现柱形图?
vue 实现立体柱状图
样式如下图所示:
可以将立体柱状图看做由yData+底+顶构成,对应代码如下:
上述js代码中,有如下注意事项:
colors[params.dataIndex % 4]
替换为this.colorOptions[params.dataIndex % 4]
,即使用代码中定义的colorOptions进行颜色填充colors[params.dataIndex % 4]
中的4的选取是可变的,保证索引值在colors变量的长度范围内。例如:本例中colors长度为4,params.dataIndex % 4
不超过4即可引用上述barchart可应用如下代码:
推荐学习:《vue视频教程》
위 내용은 怎么使用vue实现柱形图의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!