vue项目使用echarts总结

一   安装echarts 

npm install echarts --save 

二   全局引入echarts,在入口文件main.js

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

这样就可以在项目中使用啦

项目中使用 （HTML部分）

<div id="echarts" style="width: 100%;height:400px;"></div>

JS部分

this.$axios.get('接口地址').then(res=>{
    let data = res.data.data  // 获取后台返回的数据
    let myChart = this.$echarts.init(document.getElementById('echarts'))  // 初始化
    let xData = []     // 对数据处理
    let yData = []
    for(var key in data){
        xData.push(key)   // 横坐标
        yData.push(data[key].completeCount / data[key].count))   // 纵坐标
    }
    myChart.setOption({
         grid: {      //  直角坐标系
		    show: true,
            borderColor: '#eee',  //网格边线
		    containLabel: true,
		    left: "10%", //grid 组件离容器左侧的距离。
		    right: "30",
		    bottom: "20%",
		    tooltip: {     //显示提示框组件
			    show: true
		    }    
         },
         legend: {   // 图例
			show: true,
			left: '50',
			top: '20',
			width: "12",
			height: "12",
			data: ['当前进度']
		   },
         xAxis: {
			splitLine: {   // 坐标系中的分割线
				show: true, 
				lineStyle: {
				    color: ['#eee']
				}
			},
			axisLabel:{
				interval: 0,  // 设置为0 显示全部数据(默认数据过多自动隐藏)
				// rotate: 45  // 旋转角度
			},
			axisTick: {
				alignWithLabel: true  // 刻度线与标签对齐
			},
			data: xData  // 横坐标数组
		    },
	     yAxis: {  // 纵坐标
			splitLine: {
				lineStyle: {
					color: ['#eee'] // 纵坐标分割线颜色
				}
			},
			axisLabel: {
				show: true,
				interval: 'auto',
				formatter: function(value,index){
					return value * 100 + '%'
				}
			},
	    },
        series: [{
			itemStyle: {
			    normal: {  // 设置渐变色
					color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
							offset: 0,
							color: this.bg.start // 0% 处的颜色
				},
				{
					offset: 1,
					color: this.bg.end // 100% 处的颜色
				}], false)
			    }
			},
			name: '当前进度', // 悬浮框提示文字
			type: 'bar',
			// barGap: .5, //柱子之间间距
			// label:{  // 柱条上是否显示文字等设置
				// 	show: true,
			    // 	distance: 5,
				// 	position: 'top',
				// 	rotate: 45,
				// },
			data: yData
		}],
	   window.addEventListener('resize', () => {   // 自适应宽度
			myChart.resize()
		})

    })						
						            
})