uni-app uses echarts to draw data visualization diagrams

First open the project and then choose to use the command line window to open the directory (U) and

enter the command in the pop-up terminal to introduce dependencies

npm install echarts

Then we open the official website of echarts,
click here for this example,

find a case you like and click in, I will use the simplest code here to see that it will not be messy,

copy the content in his option

and find the one that you want to use to visualize the data graph The uni-app component
reference code is as follows

<template>
  <view>
    <canvas style="height: 30vh;width: 100vw;" id="myEcharts"></canvas>
  </view>
</template>
<script>
  import * as echarts from 'echarts';

  export default {
      
      
    data() {
      
      
        return {
      
      
          // 这里初始化一个null，待会儿用来充当echarts实例
          myChart: null,
        }
    },
    mounted() {
      
      
		this.myChart = echarts.init(document.getElementById('myEcharts'));
		let option = {
      
      
			xAxis: {
      
      
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
      
      
				type: 'value'
			},
			series: [
				{
      
      
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line'
				}
			]
	    };
		this.myChart.setOption(option);
		 
	    window.addEventListener('resize', () => {
      
      
		    this.myChart.resize()
	    });
    }
  }
</script>

Here this option is the graphics generation code you copied from the case

Then the elements of the drawing must set the width and height, otherwise the picture will not come out

The final effect is like this