Vue开发日志

npm install webpack -g安装webpack
npm install webpack --save -dev webpack-cli -g 安装webpack-cli
npm install -g vue-cli 安装脚手架
创建项目时可进行一系列选择
npm install echarts --save 安装echarts

在需要用到echarts的.vue文件中的<script>标签内 let echarts = require(‘echarts’)
然后黏贴官网代码，以下是用到echarts的vue文件的整个<script>标签

<script>
let echarts = require('echarts');

export default {
  name: 'bubblesort',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  // mounted(){
  //   this.drawLine();
  // },
  methods: {
    drawLine(){
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(document.getElementById('myChart'))
			// 绘制图表
			myChart.setOption({
				title: { text: '在Vue中使用echarts' },
				tooltip: {},
				xAxis: {
						data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
				},
				yAxis: {},
				series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
				}]
			});
    }
  }
}
	
</script>

注意：setInterval在vue内的使用

methods:{
    myclick:function(){
        setInterval(function(){
            console.log('===='+this.message);
        },1000)
    }
},         

这样的结果就是获取不到this.message的值。原因是setInterval()函数中的 this 指向的并非vue对象，而是指向window对象，所以就获取不到this.message的值。

解决方法：
1.可以用箭头函数，即把上面的myclick:funtion()改成 myclick=>()，这样接下来的this指向的是原来的vue对象。参考https://www.cnblogs.com/masha2017/p/12208383.html
2.在函数开头，先用一个变量存储this对象。以上面的代码为例，改为

methods:{
    myclick:function(){
    	let that=this;//存储this对象
        setInterval(function(){
            console.log('===='+that.message);
        },1000)
    }
},      

对echarts的改进：在柱状图上方显示数据大小

series: [{
									type: 'bar',
									data: this.arr_c,
									itemStyle: { //上方显示数值
									normal: {
										label: {
											show: true, //开启显示
											position: 'top', //在上方显示
											textStyle: { //数值样式
												color: 'black',
												fontSize: 13
											}
										}
									}
									}
								}]

（重要）一个很有用的调试的方法，如果不知道一个对象内有什么属性时，使用for(let item in 对象) console.log(item);查看，很容易找到需要找的属性。

改变当前正在对比的两个数值的颜色的方法：
1.找到柱状图的颜色属性定义方式：在option对象下的series数组里的normal对象下的color属性，可以用函数进行修改，如：color:function(param){}
2.获取当前数组对象的下标，进行比对，然后标记：上面传入的param是echarts柱状图表里的一列的对象，可以用刚刚提到的方法查看对象内的属性。得到下标属性是dataIndex，故可进行比对。整个的draw()函数修改如下：

draw(a, key){ //调用echarts库
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('myChart'));
			var cur=this.j;
			let k=this.key;
			// 指定图表的配置项和数据
				var option = {
					title: {
						text: '算法可视化窗口'
					},
					//tooltip: {},
					// legend: {
					// 	data:['数值']
					// },
					xAxis: [
						{
							data : this.key_c
						},
					
					],
					yAxis: {},
					series: [{
						type: 'bar',
						data: this.arr_c,
						itemStyle: { //上方显示数值
						normal: {
							color:function(params){
								var c="";
								//for(let item in params) console.log(item);
								if(params.dataIndex==cur || params.dataIndex==cur+1) //对比当前的this.j和this.j+1,即当前正在比对的数据
									c="red"
								else c="#5470c6"
								return c;
							},
							
							label: {
								show: true, //开启显示
								position: 'top', //在上方显示
								textStyle: { //数值样式
									color: 'black',
									fontSize: 13
								}
							}
						}
						}
					}]
				};
				// 使用刚指定的配置项和数据显示图表。*/
				myChart.setOption(option);
		 },

3.最后，在排序函数中使用draw()时，需要注意draw()的位置以及重置this.i和j的时间点。代码如下：

bubbleSort(arr,key,len) {
			// console.log(this);
			if(this.j == len - 1 - this.i ){
				this.j=0;
				this.i++;
			} 

			for ( ; this.i < len; ) {
				for ( ; this.j < len - 1 - this.i ; ) {
					if (arr[this.j] > arr[this.j+1]) {        //相邻元素两两对比
						
						let temp = arr[this.j+1];        //元素交换
						arr[this.j+1] = arr[this.j];
						arr[this.j] = temp;
						
											
						 let temp2 = key[this.j+1];//下标同时变换
						 key[this.j+1] = key[this.j];
						 key[this.j] = temp2;//进行完一次置换
						
						// this.j++;
						// return;//进行完一次置换
						}//if结束
						this.draw();
						
						//this.j++;  //j在判断结束自增1，并且判断条件len - 1 - this.i 
						
						if(this.j == len - 1 - this.i ){
							//this.j-=2;
							this.draw();
							this.j=0;
							this.i++;
							this.draw();
						} 
						else this.j++;
						
					  //this.draw();//在这边会产生很怪的视觉效果
						return;
					}
				}
		},