uniapp在Vue页面中使用echarts绘制堆叠柱状图

想要在uniapp中使用echarts，需要进行以下操作步骤：
一：操作步骤
1.定义存放图表的div;
2.引入echarts.min,js,可以去echarts的官网“在线定制”;
3.在需要使用echarts的图表vue页面引入echarts.min.js;
4.开始使用echarts绘制图表，此案例是动态的给图表赋值。

具体代码如下：
定制js:

test.vue页面

<style scoped>
  h2{
    text-align: center;
    padding: 30px;
    font-size: 18px;
  }
  #chart_example{
    width: 100%;
    height: 500px;
    border: 1px solid red;
    margin: 0 auto;
  }
</style>
<template>
  <div>
    <h2>vue中插入Echarts示例</h2>
    <div id="chart_example">
 
    </div>
  </div>
</template>
 
<script>
  import echarts from '@/js/echarts.min.js'
  export default {
    data() {
      return {}
    },
    mounted() {
		this.inc();
		this.ectest(this.dataparam,this.normal,this.ask,this.late,this.early);
	  
    },
    methods: {
		ectest(dataparam,normal,ask,late,early){
		let this_ = this;
		//初始化图表
		let myChart = echarts.init(document.getElementById('chart_example'));
		//构建图表
		let option = {
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
		            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    legend: {
		        data: ['正常', '请假', '迟到', '早退']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'value'
		    },
		    yAxis: {
		        type: 'category',
		        data: dataparam
		    },
		    series: [
		        {
		            name: '正常',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                show: true,
		                position: 'insideRight'
		            },
		            data: normal
		        },
		        {
		            name: '请假',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                show: true,
		                position: 'insideRight'
		            },
		            data: ask
		        },
		        {
		            name: '迟到',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                show: true,
		                position: 'insideRight'
		            },
		            data: late
		        },
		        {
		            name: '早退',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                show: true,
		                position: 'insideRight'
		            },
		            data: early
					}
		    ]
		};
		      myChart.setOption(option);
		 
		      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
		      window.addEventListener('resize',function() {myChart.resize()});
	},
	//调用接口给图表动态赋值
	inc(){
		uni.request({
			url:'数据接口',
			data:{
				classid:1,
				begintimes:'2020-02-02',
				endtimes:'2020-02-02',
				classnames:'yuwen'
			},
			method:'GET'
		}).then(res=>{
			console.log(res[1].data)
			var arr=[];
			var normal=[];
			var ask=[];
			var late=[];
			var early=[];
			var len=res[1].data.series;
			if(res[1].data.code==0){
				for(var i=0;i<len.length;i++){
					arr.push(len[i].name);
					normal.push(len[i].normal);
					ask.push(len[i].ask);
					late.push(len[i].late);
					early.push(len[i].early);
				}
				console.log(arr)
				console.log(normal)
				console.log(ask)
				console.log(late)
				console.log(early)
				this.ectest(arr,normal,ask,late,early)
				
			}
		})
	}
	},
    watch: {},
    created() {
 
    }
  }
</script>

二:关于动态绘制图表调用接口的步骤
*方法一：*如上案例
1.把初始化图表和创建图表放在一个方法中ectest(dataparam,normal,ask,late,early)，这个方法中的参数是要动态赋给图表的值；
2.再定义一个方法inc(),去调用后台返回数据的接口，然后在接口的回调中调用创建图表的方法ectest(dataparam,normal,ask,late,early)，并给这些参数赋值，把图表中需要动态获取值的部分用以上参数替换。
方法二：

三：补充
uni.request({}).then(res=>{}),.then是回调接口返回的数据，并把数据赋值给图表

此案例是针对echarts的堆叠柱形图，其他的图表同样适用！！！