开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）：统计分析-图表显示(页面整合)】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11510
统计分析-图表显示(页面整合)
目录：
一、获取 ECharts
二、项目中集成 ECharts
三、项目中整合 echarts
一、获取ECharts
你可以通过以下几种方式获取 ECharts.
从 Apache ECharts (incubating) 官网下载界面获取官方源码包后构建。
在 ECharts 的 GitHub 获取。
通过 npm 获取 echarts，npm install echarts --save ，详见在 webpack 中使用 echarts"通过 jsDelivr 等 CDN 引入
引入 ECharts
通过标签方式直接引入构建好的 echarts 文件
<IDOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts 文件-->
<script src-"echarto.min:js"></scriptp>
绘制一个简单的图表
在绘图前需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为ECharts 准备一个具备大小〈宽高〉的DOM-->
<div id="main" style- "width: 600px;height:400px;"></div></body>
然后就可以通过 echarts.init 方法初始化一个 echarts 案例并通过 setoption 方法生成一个简単的柱状图，下回是完整代码。
<!DOCTYPE html>
<html>
<head>
<meta charset-"utf-8">
<title>ECharts</title>
<!-- 引入echarts.js -->
<script src="echarts.min.js"></script>
<fhead>
<body>
<1-- 为 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:[’销量']
}，
xAx15:{
data:[“衬衫"，"羊毛衫","雪纺衫","裤子""高跟鞋","袜子”]
}，
yAxis:{}，
series:[{
name:'销量'，
type:'bar'，
data:[5，20，36，10，10，20]
myChart. setOption(option) ;
</script>
</body>
</html>
这样你的第一个图表就诞生了!
折线图.html
(script)
var myChart = echarts .init(document .getElementById('main'));
var option ={
//x 轴是类目轴(离散数据) ,必须通过data设置类目数据
xAxis: {
type: 'category',
data: ['Mon', 'Tue'，'Wed', 'Thu', 'Fri', 'Sat', "Sun']
},
//y 轴是数据轴(连续数据)
yAxdis: {
type: 'value'
},
//系列列表。每个系列通过type 决定自己的图表类型
serles: [{
//系列中的数据内容数组
date: [820, 932, 901, 934， 1290, 1330, 1320]，
//折线图
type:'line'
二、项目中集成ECharts
1、安装 ECharts
1 npm install --save echarts@4.1.0
2、增加路由
src/router/index.js
在统计分析路由中增加子路由
{
path: 'chart' ,
name:'StatisticsDayChart',
component: ()=> import('@/views/statisticsdaily/chart'),
meta:{title: '统计图表'}
}
3、创建组件
src/views/statistics/daily/chart.vue
模板
<template>
<div class-"app-container",
<!--表单--〉
cel-form inline-"true" class-" demo-form-inline">
<el-form-item>
<el-select v-model-"searchObj. type"clearable placeholder-"iit"<el-option label-"学员登录数统计"value-"login num"/>
<el-option label="学员注册数统计”value="register num"/>
<el-option label-"课程播放数统计"value-"video _view_num"/><el-option label-" 每日课程数统计” value-"course. num"/>
</el-select>
</el-form-item>
</el,form-item>
<el-form-item )
<el-date-picker
v-model-"searchObj .begin"
type-"date"
placeholder-"选择开始日期"
value-format-"yyy-M-dd"/)
</el-form-item>
<el-form-item>
<el-date-picker
v-model="search0bj，end"
type="date"
placeholder="选择截止日期"
value- format-"yyyy-MM-dd"/>
</el-form-item>
<el-button
<disabled-"btnDisabled"
type="primary"
icon="el-icon-search"
@click="showChart()" >查询</el-button>
</el-form>
<div class-"chart-container">
<div id="chart" class="chant" style="height: 500px;width:100%/>
</div>
</div>
</template>
js:暂时显示临时数据
<script>
import echarts from 'echarts '
export default {
data() {
return {
searchobj: }
type:
begin: ' ',
end:' '，
},
btnDisabled: false,
chart: null,
title: ' ',
xData: [],
yData: []
}
},
methods: {
showChart() {
this.initChartData()
this.setChart()
//准备图表数据
initChartData() {
}，
setChart() {
//基于准备好的 dom,初始化 echarts 实例
this, chart = echarts. init (document. getE lementBvId(' chart'))
//console. log(this . chart)
//指定图表的配置项和数据
var option ={
//x 轴是类目轴(离散数据)， 必须通过 data 设置类目数据 xAxis:
type: 'category' ,
data: ['Mon', 'Tue', 'Wed", 'Thu', "Fri',' 'Sat', 'Sun']
},
// y 轴是数据轴(连续数据)
yAxis: {
type:'vale'
},
//系列列表。每个系列通过type决定自己的图表类型 series: [{
三、项目中整合 echarts
1、下载 echarts 依赖
npm install - -save echarts@4.1.0
2、整合页面
统计分析
用生成数据
图表显示
下列列表
开始日期
结束日期
