Echarts折线图

Echarts折线图

1.准备一个固定宽高盒子

<el-tab-pane label="企业访问">
		<div class="user_access_warp">
			<div class="user_access_inner " style="width: 1200px; height: 500px" ref="line_chat_com">

			</div>
		</div>
</el-tab-pane>

2.引入Echarts

	// 引入基本模板
	let echarts = require('echarts/lib/echarts');
	// 引入柱状图组件
	require('echarts/lib/chart/line');
	// 引入提示框和title组件
	require('echarts/lib/component/tooltip');
	require('echarts/lib/component/title');

3.封装设置图表

//设置图表
set_chart(obj,row_data,col_data,title){
	// console.log(col_data)
	obj.setOption({
		legend: {
			data:[title]
		},
		title: {
			text: title,
			left: 'center',
			top:"5%"
		},
		tooltip: {
			trigger: 'axis'
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '10%',
			top:"13%",
			containLabel: true,
			x: 40,
			x2: 100,
			y2: 150,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
		},
		xAxis: {
			title:'企业访问',
			type: 'category',
			boundaryGap: false,
			data:row_data,
			axisLabel: {
				interval: this.interval, //横轴信息全部显示
				//rotate: 60 //-30度角倾斜显示
			}
		},
		yAxis: {
			title:'访问量',
			type: 'value'
		},
		dataZoom: [{
			type: 'slider',
			start: 0,
			minSpan:8
		}, {
			type:"inside",
			start: 0,
			end: 10,
			handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
			handleStyle: {
				color: '#fff',
				shadowBlur: 3,
				shadowColor: 'rgba(0, 0, 0, 0.6)',
				shadowOffsetX: 2,
				shadowOffsetY: 2
			}
		}],
		series: [{
			name:'用户访问',
			type:'line',
			stack: '总量',
			smooth: true,
			symbol: 'none',
			sampling: 'average',
			data:col_data,
			barWidth : 20,
			itemStyle : {
				normal : {
					color:"#005ca9"
				}
			}
		}，]
	});
}

4.使用

......
// 通过调后端数据接口，将数据分别保存
// 通过$refs获取渲染盒子节点
let comChart = echarts.init(this.$refs.line_chat_com);
// 添加数据
this.set_chart(comChart,this.time_arr,this.com_arr,'企业访问数');

5.扩展
可以配合查找来更新图表数据

<div class="vip_search_box f_s_b">
    <ul class="vip_search_list f_s ">
        <li class="f_s">
            <div class="search_item_tit">
                访问时段：
            </div>
            <div class="search_item_con">
                <el-select   placeholder="请选择" v-model="time_type" size="small" clearable>
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
        </li>
        <li class="margin_left_b">
            <div class="vip_common_btn vip_submit_btn vip_add_btn" @click="search()">查询</div>
        </li>
    </ul>
</div>


...
data() {
	return {
		time_arr: [],
		com_arr: [],
		options: [
			{
				label:"最近1周",
				value:"1"
			},{
				label:"最近30天",
				value:"2"
			},{
				label:"最近90天",
				value:"3"
			},{
				label:"最近180天",
				value:"4"
    		}
		]，
		//横坐标间隔多少显示一个数据
		interval:0
	}
}

//点击查询
search(){
	switch(parseInt(this.time_type)){
		case 1:this.interval=0; break;
		case 2:this.interval=2; break;
		case 3:this.interval=6; break;
		case 4:this.interval=20; break;
		default:this.interval=0;
	}
	//重新渲染数据
	this.getCompanyIntroMiddleData()
}