Echarts—折线图动态获取数据示例（java版本）

最终效果

饼状图：饼状图示例，使劲点我！！！

柱状图：柱状图实例，使劲点我！！！

步骤：准备一个dom——>获取dom节点——>初始化——>绘制图表——>渲染数据

html代码

<template>
	<section class="chart-container">
		<el-row>
			<el-badge  class="item" @click.native.prevent="test">
				<el-button type="primary" round size="small">告警信息</el-button>
			</el-badge>
		</el-row>

		<el-row>
			<el-col :span="11">
				<div id="text" style="width:100%; height:200px; margin-top: 150px;">
					<span style="font-size:26px">今日告警：56条</span><br/>
					<span style="font-size:26px">昨日告警：5条</span><br/>
					<span style="font-size:26px">本周告警：266条</span><br/>
					<span style="font-size:26px">本月告警：1240条</span><br/>
					<span style="font-size:26px">告警数最多的系统:营销员邮件系统</span><br/>
					<span style="font-size:26px">告警数最少的系统:统一身份管理系统</span><br/>
				</div>
			</el-col>
			<el-col :span="12">
				<div id="chartColumn" style="width:100%; height:400px;"></div>
			</el-col>
			<el-col :span="11">
				
				
    	<template>
		  <el-select v-model="filters.value" placeholder="校验规则" clearable  @change="change" @clear="clear"  loading-text="加载中...">
		    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
		  </el-select>
		</template>
		
		
				<div id="chartLine" style="width:100%; height:400px;"></div>
			</el-col>
			<el-col :span="12">
				<div id="chartPie" style="width:100%; height:400px;"></div>
			</el-col>
		</el-row>
	</section>
</template>

js代码

<script>
	import echarts from 'echarts';
	import http from '../../util/http.js';
	let code = 1;
	let url = {
		login: 'http://' + http.host_port + '/login',
		columndata: 'http://' + http.host_port + '/columndata',
		piedata: 'http://' + http.host_port + '/piedata',
		linedata: 'http://' + http.host_port + '/linedata'
	}
	export default {
		data() {
				var checkRule_code='';
			return {
				admin : JSON.parse(sessionStorage.getItem('user')).username,
				chartColumn: null,
				chartBar: null,
				chartLine: null,
				chartPie: null,
				filters: {
					value:''
				},
				options:[],
        		 value: ''
				
			}
		},
		//页面启动自动加载methods中的方法
		created() {
			console.log("执行created()函数");
			this.getRules();
			this.fillColumnChart();
			this.fillPieChart();
			this.fillLineChart();
			
		},

		methods: {
			//点击选择器清空按钮时触发，空单选框选项加载所有数据
			clear(){
				console.log("清空单选框选项");
				this.fillLineChart();
			},
			//告警信息点击事件，跳转校验结果查询
			test() {
				this.$router.push({
					path: '/checkresult'
				});
			},
			//当用户选择单选框选项时触发，携带选择的参数，作为条件去后台查询单条数据
			change(value){
				code++;
				this.fillColumnChart();
				this.fillPieChart();
				//this.fillLineChart();
				
				var chart8 = null;
				var div_  = document.getElementById("chartLine");
				div_.removeAttribute("_ec