uni-app使用echarts绘制数据可视化图uniapp数据分析图

首先打开hbuilder，右键项目目录

打开终端，并输入

npm install echarts

引入依赖

如果想自主学习图表，可以参考以下代码

<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>

如果是想快速引用可以参考：

uni-app使用echarts绘制数据可视化图_uniapp echarts可视化首选组件-CSDN博客