How to use vue to implement a column chart: 1. Create a div attribute as "
"; 2. Pass "mounted(){this.fetchData()window.addEventListener('resize',()=>{if (this.chart){...}" Just implement a three-dimensional histogram.
The operating environment of this tutorial: Windows 10 system, vue3 version, DELL G3 computer
How to use vue to implement a column chart?
vue implements a three-dimensional histogram
The style is as shown in the figure below:
The three-dimensional histogram can be regarded as the bottom and top of yData The composition, the corresponding code is as follows:
In the above js code, there are the following precautions:
colors[params.dataIndex % 4]Replace with this.colorOptions[params.dataIndex % 4], that is, use the colorOptions defined in the code for color fillingcolors[params.dataIndex % 4]The selection of 4 in is variable, ensuring that the index value is within the length range of the colors variable. For example: in this example, the length of colors is 4, params. dataIndex % 4can be no more than 4To quote the above barchart, the following code can be applied:
Recommended learning: "vue video tutorial》
The above is the detailed content of How to use vue to implement column chart. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
