Echarts教程1. 课程⽬标可以对Echarts的基本配置，图表详细用法。高级技巧有深入的理解和认识 2. 数据可

1. 课程⽬标

可以让你快速零基础上手Echarts图表开发可以对Echarts的基本配置，图表详细用法。高级技巧有深入的理解和认识学习完本门课程后，你将能够利用Echarts图表结合后端数据进行前段可视化报表展示结合后台数据，根据业务需求利用Echarts进行更高级更个性的可视化效果展示

2. 数据可视化概述

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

3. 什么是数据可视化？

数据可视化就是用图形来表示信息和数据。借助图表、图形和地图等可视化元素，数据可视化工具让您可以便捷地查看和了解数据中的趋势、异常值和模式。

4. 经典可视化案例

案例1--多变的坐标轴案例2--两组非负数据的对称显示案例3--多数据情况下的滚动/缩放显示

5. ⼤数据可视化的价值

能够处理不同种类型的传入数据

·能够应用不同种类的过滤器来调整结果

·能够在分析过程中与数据集进行交互

·能够连接到其他软件来接收输入数据，或为其他软件提供输入数据

·能够为用户提供协作选项

6. 数据可视化⼯具、案例、书籍

工具：

Excel 可视化 BI（Power BI \Tableau \ 帆软FineBI等等） Power BI Tableau 帆软FineBI 编程篇 Python语言 . PHP语言 HTML、JavaScript 和 CSS语言 . R语言

案例：

航线星云 Calling Circles 互联网络综合数据库（IDW）淘金热 Branch社区之树

书籍：

《量化信息的视觉呈现》
《用数据讲故事》
《好图表：哈佛商业评论教你如何聪明且有说服力的数据可视化》 4)《让人一眼就看懂数据的呈现方式》
《惊艳的可视化：从专家的角度看数据》
《意外的分析之旅：让你的数据知道谁是老大！》 7)《不只是美：信息图表设计原理与经典案例》
《时间绘图法：时间轴的历史》 9 ）《鲜活的数据：数据可视化指南》
信息图表

7. Echarts概述

ECharts是百度开源的纯 Javascript 图表库，目前开源可以与highcharts相匹敌的一个图表库.支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

8. Echarts特性介绍

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

9. 如何快速上⼿开发⼀个Echarts可视化图表

直接引入：

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

10. 如何阅读Echarts官⽅⽂档

利用关键字搜索出来，对于自己需要的内容进行阅读 echarts.baidu.com/tutorial.html或http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

11. Echarts学习必备基础知识

html css javascript vue node

12. Echarts3.x与Echarts2.x的区别

主要是性能方面有质的飞跃——这个三言两语难讲明白架构层面，npm、vue、react等方面，用起来更加爽细节方面：比如渐变色，不用zcolor，避免新手找不着北

13. Echarts基础架构与常⻅名词术语

1.可用多种方式引入echarts， 2.为ECharts准备一个具备宽高的Dom容器； 3.初始化Echarts实例 4.在dom中显示图表图表名词

14. Echarts标准开发模板

echarts 大数据模板大屏

15. Echarts 柱状图（bar）详解

var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 'red' }, subtext: '副标题', subtextStyle: { color: 'blue' }, padding: [0, 0, 10, 100] // 位置 }, // ---- legend ---- legend: { type: 'plain', // 图列类型，默认为 'plain' top: '1%', // 图列相对容器的位置 top\bottom\left\right selected: { // '销量': true // 图列选择，图形加载出来会显示选择的图列，默认为true }, textStyle: { // 图列内容样式 color: '#fff', // 字体颜色 backgroundColor: 'black' // 字体背景色 }, tooltip: { // 图列提示框，默认不显示 show: true, color: 'red'
}, data: [ // 图列内容 { name: '销量', icon: 'circle', textStyle: { color: 'red', // 单独设置某一个图列的颜色 backgroundColor: '#fff' // 单独设置某一个图列的字体背景色 } } ] }, // --- 提示框 ---- tooltip: { show: true, // 是否显示提示框，默认为true trigger: 'item', // 数据项图形触发 axisPointer: { // 指示样式 type: 'shadow', axis: 'auto' }, padding: 5, textStyle: { // 提示框内容的样式 color: '#fff'
} }, // ---- gird区域 --- gird: { show: false, // 是否显示直角坐标系网格 top: 80, // 相对位置 top\bottom\left\right containLabel: false, // gird 区域是否包含坐标轴的刻度标签 tooltip: { show: true, trigger: 'item', // 触发类型 textStyle: { color: '#666' } } }, // ------ X轴 ------ xAxis: { show: true, // 是否显示 position: 'bottom', // x轴的位置 offset: 0, // x轴相对于默认位置的偏移 type: 'category', // 轴类型，默认为 'category' name: '月份', // 轴名称 nameLocation: 'end', // 轴名称相对位置 nameTextStyle: { // 坐标轴名称样式 color: 'red', padding: [5, 0, 0, -5] }, nameGap: 15, // 坐标轴名称与轴线之间的距离 nameRotate: 0, // 坐标轴名字旋转 axisLine: { // 坐标轴轴线 show: true, // 是否显示 symbol: ['none', 'arrow'], // 是否显示轴线箭头 symbolSize: [8, 8], // 箭头大小 symbolOffset: [0, 7], // 箭头位置 // ------ 线 --------- lineStyle: { color: 'blue', width: 1, type: 'solid' } }, axisTick: { // 坐标轴刻度 show: true, // 是否显示 inside: true, // 是否朝内 length: 3, // 长度 lineStyle: { // 默认取轴线的样式 color: 'red', width: 1, type: 'solid' } }, axisLabel: { // 坐标轴标签 show: true, // 是否显示 inside: false, // 是否朝内 rotate: 0, // 旋转角度 margin: 5, // 刻度标签与轴线之间的距离 color: 'red' // 默认取轴线的颜色 }, splitLine: { // gird区域中的分割线 show: false, // 是否显示 lineStyle: { // color: 'red', // width: 1, // type: 'solid' } }, splitArea: { // 网格区域 show: false // 是否显示，默认为false }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, // ------ y轴 ---------- yAxis: { show: true, // 是否显示 position: 'left', // y轴位置 offset: 0, // y轴相对于默认位置的偏移 type: 'value', // 轴类型，默认为 ‘category’ name: '销量', // 轴名称 nameLocation: 'end', // 轴名称相对位置value nameTextStyle: { // 坐标轴名称样式 color: '#fff', padding: [5, 0, 0, 5] // 坐标轴名称相对位置 }, nameGap: 15, // 坐标轴名称与轴线之间的距离 nameRotate: 270, // 坐标轴名字旋转

axisLine: {    // 坐标轴 轴线
  show: true,  // 是否显示
  //  -----   箭头 -----
  symbol: ['none', 'arrow'],  // 是否显示轴线箭头
  symbolSize: [8, 8],  // 箭头大小
  symbolOffset: [0, 7], // 箭头位置

  // ----- 线 -------
  lineStyle: {
    color: 'blue',
    width: 1,
    type: 'solid'
  }
},
axisTick: {      // 坐标轴的刻度
  show: true,    // 是否显示
  inside: true,  // 是否朝内
  length: 3,      // 长度
  lineStyle: {
    color: 'red',  // 默认取轴线的颜色
    width: 1,
    type: 'solid'
  }
},
axisLabel: {      // 坐标轴的标签
  show: true,    // 是否显示
  inside: false,  // 是否朝内
  rotate: 0,     // 旋转角度
  margin: 8,     // 刻度标签与轴线之间的距离
  color: 'red',  // 默认轴线的颜色
},
splitLine: {    // gird 区域中的分割线
  show: true,   // 是否显示
  lineStyle: {
    color: '#666',
    width: 1,
    type: 'dashed'
  }
},
splitArea: {     // 网格区域
  show: false   // 是否显示，默认为false
}

}, // ------- 内容数据 ------- series: [ { name: '销量', // 序列名称 type: 'bar', // 类型 legendHoverLink: true, // 是否启用图列 hover 时的联动高亮 label: { // 图形上的文本标签 show: false, position: 'insideTop', // 相对位置 rotate: 0, // 旋转角度 color: '#eee' }, itemStyle: { // 图形的形状 color: 'blue', barBorderRadius: [18, 18, 0 ,0] }, barWidth: 20, // 柱形的宽度 barCategoryGap: '20%', // 柱形的间距 data: [3000, 4000, 4200, 4500, 6000, 5600, 4500, 5020, 4500, 5400, 4300, 1200] } ] };`

16. 授⼈以渔01_Echarts 配置项查看技巧

图表标题 .图例.值域.提示框.区域缩放控制器.网格.类目轴.数值型坐标轴默认参数

17. Echarts 拆线图（line）详解基本配置

标题 .图例.图片下载.X轴.y轴.series

18. Echarts 拆线图（line）详解动态数据展示

设置简单的属性. 设置图例是否显示，这里我们可以隐藏图例，使用ListView或者RecyclerView实现我们需要实现的简答的效果. 设置MarkView，实现我们想要的效果. 折线图

19. 授⼈以渔02定制输出数据视图（dataView）的内容

ProjectServer2007允许用户对项目、任务、资源、分配添加自己的定制数据，定制数据分为两类，一类是以字符串（数据表为MSP_EpmCPxxxStr0）直接保存，另一类是保存某个查阅表格中值对应的ID（数据表为MSP_EpmCPxxxUid0），可用下面的SQL查询这两类定制数据，

select p.projectuid, p.projectname, lt1.memberfullvalue as 项目类别, cpps0.cfval0 as 测试一 from msp_epmproject as p LEFT OUTER JOIN dbo.MSP_EpmCPPrjStr0 cpps0 ON cpps0.EntityUID = p.ProjectUID LEFT OUTER JOIN dbo.MSP_EpmCPPrjUid0 ON dbo.MSP_EpmCPPrjUid0.EntityUID = p.ProjectUID LEFT OUTER JOIN dbo.MSP_EpmLookupTable AS lt1 ON lt1.LookupTableUID = '61D944EA-8848-4D01-AE21-B0A24F9CA47F' AND lt1.MemberUID = dbo.MSP_EpmCPPrjUid0.CFVal2

Echarts教程