前端整合ECharts

1、简介

ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

官方网站：https://echarts.baidu.com/

2、基本使用

入门参考：官网->文档->教程->5分钟上手ECharts

（1）创建html页面：柱图.html

（2）引入ECharts

<script src="echarts.min.js"></script>

（3）定义图表区域

<div id="main" style="width: 600px;height:400px;"></div>

（4）渲染图表

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
 
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
 
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
  </body>
</html>复制

3、折线图

实例参考：官网->实例->官方实例 https://echarts.baidu.com/examples/

折线图.html

 option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};复制

二、项目中集成ECharts

1、安装ECharts

npm install --save echarts@4.1.0

2、增加路由

src/router/index.js

在统计分析路由中增加子路由

 {
    path: '/sta',
    component: Layout,
    redirect: '/sta/create',
    name: '统计分析',
    meta: { title: '统计分析', icon: 'example' },
    children: [
      {
        path: 'create',
        name: '生成数据',
        component: () => import('@/views/sta/create'),
        meta: { title: '生成数据', icon: 'table' }
      },
      {
        path: 'show',
        name: '图表显示',
        component: () => import('@/views/sta/show'),
        meta: { title: '图表显示', icon: 'tree' }
      }
    ]
  },复制

3、创建组件

 <template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
 
      <el-form-item label="日期">
        <el-date-picker
          v-model="day"
          type="date"
          placeholder="选择要统计的日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
 
      <el-button
        :disabled="btnDisabled"
        type="primary"
        @click="create()"
      >生成</el-button>
    </el-form>
 
  </div>
</template>
<script>
import sta from '@/api/sta'
export default {
  data() {
    return {
      day: '',
      btnDisabled: false
    }
  },
  created() {
 
  },
  methods: {
    create() {
      sta.createStaData(this.day)
        .then(response => {
          // 提示信息
          this.$message({
            type: 'success',
            message: '生成数据成功!'
          })
          // 跳转到图表显示页面
          this.$router.push({ path: '/sta/show' })
        })
    }
  }
}
</script>复制

三、完成后端业务

1、controller

  @GetMapping("getShowData/{type}/{begin}/{end}")
    public R getShowData(@PathVariable String type,@PathVariable String begin,@PathVariable String end){
        Map<String,Object> map = statisticsDailyService.getShowData(type,begin,end);
        return R.ok().data(map);
    }复制

2、service

接口

Map<String, Object> getShowData(String type, String begin, String end);复制

实现

  @Override
    public Map<String, Object> getShowData(String type, String begin, String end) {
        QueryWrapper<StatisticsDaily> queryWrapper = new QueryWrapper<>();
        queryWrapper.between("date_calculated",begin,end);
        queryWrapper.select("date_calculated",type);//查询需要的列，数据时间和类型
        List<StatisticsDaily> lists = baseMapper.selectList(queryWrapper);
 
        //返回的数据有两部分：date_calculated     和      所类型type
        //前端需要json数据，对于java代码的list集合，需要返回x、y轴两个list数据
        ArrayList<String> dateList = new ArrayList<>();
        ArrayList<Integer> typeList = new ArrayList<>();
        //遍历lists封装两个list集合
        for (StatisticsDaily list:lists){
            dateList.add(list.getDateCalculated());//封装日期
 
            if (type.equals("login_num")){//封装数量类型
                typeList.add(list.getLoginNum());
            }
            if (type.equals("register_num")){
                typeList.add(list.getRegisterNum());
            }
            if (type.equals("video_view_num")){
                typeList.add(list.getVideoViewNum());
            }
            if (type.equals("course_num")){
                typeList.add(list.getCourseNum());
            }
        }
 
        Map<String, Object> map = new HashMap<>();
        map.put("dateList",dateList);
        map.put("typeList",typeList);
        return map;
    }复制

四、前后端整合

1、创建api

 import request from '@/utils/request'
export default {
  // 1 生成统计数据
  createStaData(day) {
    return request({
      url: '/staservice/sta/registerCount/' + day,
      method: 'post'
    })
  },
  // 2 获取统计数据
  getDataSta(searchObj) {
    return request({
      url: `/staservice/sta/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,
      method: 'get'
    })
  }
}复制

2、chart.vue中引入api模块

import sta from '@/api/sta'复制

3、修改initChartData方法

 import echarts from 'echarts'
import staApi from '@/api/sta'
 
export default {
  data() {
    return {
      searchObj: {},
      btnDisabled: false,
      xData: [],
      yData: []
    }
  },
  methods: {
    showChart() {
      staApi.getDataSta(this.searchObj)
        .then(response => {
          console.log('*****************' + response)
          this.yData = response.data.numDataList
          this.xData = response.data.date_calculatedList
 
          // 调用下面生成图表的方法，改变值
          this.setChart()
        })
    },
    setChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById('chart'))
      // console.log(this.chart)
 
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '数据统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: [{
          show: true,
          height: 30,
          xAxisIndex: [
            0
          ],
          bottom: 30,
          start: 10,
          end: 80,
          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          handleSize: '110%',
          handleStyle: {
            color: '#d3dee5'
 
          },
          textStyle: {
            color: '#fff'
          },
          borderColor: '#90979c'
        },
        {
          type: 'inside',
          show: true,
          height: 15,
          start: 1,
          end: 35
        }],
        // x轴是类目轴（离散数据）,必须通过data设置类目数据
       
    }
  }
}
</script>复制

4、修改options中的数据

 xAxis: {
          type: 'category',
          data: this.xData
        },
        // y轴是数据轴（连续数据）
        yAxis: {
          type: 'value'
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [{
          // 系列中的数据内容数组
          data: this.yData,
          // 折线图
          type: 'line'
        }]
      }
 
      this.chart.setOption(option)复制

五、样式调整

参考配置手册：https://echarts.baidu.com/option.html#title

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>ECharts</title>
	<!-- 引入刚刚下载的 ECharts 文件 -->
	<script src="echarts.js"></script>
	</head>
	<body>
	<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
	<div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	var option = {
	title: {
	text: 'ECharts 入门示例'
	},
	tooltip: {},
	legend: {
	data: ['销量']
	},
	xAxis: {
	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
	},
	yAxis: {},
	series: [
	{
	name: '销量',
	type: 'bar',
	data: [5, 20, 36, 10, 10, 20]
	}
	]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	</script>
	</body>
	</html>

	option = {
	xAxis: {
	type: 'category',
	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
	type: 'value'
	},
	series: [
	{
	data: [150, 230, 224, 218, 135, 147, 260],
	type: 'line'
	}
	]
	};

	{
	path: '/sta',
	component: Layout,
	redirect: '/sta/create',
	name: '统计分析',
	meta: { title: '统计分析', icon: 'example' },
	children: [
	{
	path: 'create',
	name: '生成数据',
	component: () => import('@/views/sta/create'),
	meta: { title: '生成数据', icon: 'table' }
	},
	{
	path: 'show',
	name: '图表显示',
	component: () => import('@/views/sta/show'),
	meta: { title: '图表显示', icon: 'tree' }
	}
	]
	},

	<template>
	<div class="app-container">
	<!--表单-->
	<el-form :inline="true" class="demo-form-inline">

	<el-form-item label="日期">
	<el-date-picker
	v-model="day"
	type="date"
	placeholder="选择要统计的日期"
	value-format="yyyy-MM-dd"
	/>
	</el-form-item>

	<el-button
	:disabled="btnDisabled"
	type="primary"
	@click="create()"
	>生成</el-button>
	</el-form>

	</div>
	</template>
	<script>
	import sta from '@/api/sta'
	export default {
	data() {
	return {
	day: '',
	btnDisabled: false
	}
	},
	created() {

	},
	methods: {
	create() {
	sta.createStaData(this.day)
	.then(response => {
	// 提示信息
	this.$message({
	type: 'success',
	message: '生成数据成功!'
	})
	// 跳转到图表显示页面
	this.$router.push({ path: '/sta/show' })
	})
	}
	}
	}
	</script>

	@GetMapping("getShowData/{type}/{begin}/{end}")
	public R getShowData(@PathVariable String type,@PathVariable String begin,@PathVariable String end){
	Map<String,Object> map = statisticsDailyService.getShowData(type,begin,end);
	return R.ok().data(map);
	}

	@Override
	public Map<String, Object> getShowData(String type, String begin, String end) {
	QueryWrapper<StatisticsDaily> queryWrapper = new QueryWrapper<>();
	queryWrapper.between("date_calculated",begin,end);
	queryWrapper.select("date_calculated",type);//查询需要的列，数据时间和类型
	List<StatisticsDaily> lists = baseMapper.selectList(queryWrapper);

	//返回的数据有两部分：date_calculated 和所类型type
	//前端需要json数据，对于java代码的list集合，需要返回x、y轴两个list数据
	ArrayList<String> dateList = new ArrayList<>();
	ArrayList<Integer> typeList = new ArrayList<>();
	//遍历lists封装两个list集合
	for (StatisticsDaily list:lists){
	dateList.add(list.getDateCalculated());//封装日期

	if (type.equals("login_num")){//封装数量类型
	typeList.add(list.getLoginNum());
	}
	if (type.equals("register_num")){
	typeList.add(list.getRegisterNum());
	}
	if (type.equals("video_view_num")){
	typeList.add(list.getVideoViewNum());
	}
	if (type.equals("course_num")){
	typeList.add(list.getCourseNum());
	}
	}

	Map<String, Object> map = new HashMap<>();
	map.put("dateList",dateList);
	map.put("typeList",typeList);
	return map;
	}

	import request from '@/utils/request'
	export default {
	// 1 生成统计数据
	createStaData(day) {
	return request({
	url: '/staservice/sta/registerCount/' + day,
	method: 'post'
	})
	},
	// 2 获取统计数据
	getDataSta(searchObj) {
	return request({
	url: `/staservice/sta/showData/${searchObj.type}/${searchObj.begin}/${searchObj.end}`,
	method: 'get'
	})
	}
	}

	import echarts from 'echarts'
	import staApi from '@/api/sta'

	export default {
	data() {
	return {
	searchObj: {},
	btnDisabled: false,
	xData: [],
	yData: []
	}
	},
	methods: {
	showChart() {
	staApi.getDataSta(this.searchObj)
	.then(response => {
	console.log('*****************' + response)
	this.yData = response.data.numDataList
	this.xData = response.data.date_calculatedList

	// 调用下面生成图表的方法，改变值
	this.setChart()
	})
	},
	setChart() {
	// 基于准备好的dom，初始化echarts实例
	this.chart = echarts.init(document.getElementById('chart'))
	// console.log(this.chart)

	// 指定图表的配置项和数据
	var option = {
	title: {
	text: '数据统计'
	},
	tooltip: {
	trigger: 'axis'
	},
	dataZoom: [{
	show: true,
	height: 30,
	xAxisIndex: [
	0
	],
	bottom: 30,
	start: 10,
	end: 80,
	handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
	handleSize: '110%',
	handleStyle: {
	color: '#d3dee5'

	},
	textStyle: {
	color: '#fff'
	},
	borderColor: '#90979c'
	},
	{
	type: 'inside',
	show: true,
	height: 15,
	start: 1,
	end: 35
	}],
	// x轴是类目轴（离散数据）,必须通过data设置类目数据

	}
	}
	}
	</script>

	xAxis: {
	type: 'category',
	data: this.xData
	},
	// y轴是数据轴（连续数据）
	yAxis: {
	type: 'value'
	},
	// 系列列表。每个系列通过 type 决定自己的图表类型
	series: [{
	// 系列中的数据内容数组
	data: this.yData,
	// 折线图
	type: 'line'
	}]
	}

	this.chart.setOption(option)