Echarts
Echarts是一个纯JavaScript图标库，底层依赖于轻量级
的Canvas类库ZRender，基于BSD开原协议，是一款非常
优秀的可视化前端框架。通俗的来说，就是纯j实现，MV
C封装，数据驱动。
Svg和Canvas是两个可以选择的类库之一，其中svg交互
性更好，性能较弱，不适合移动端，在绘制数万个点是
会崩溃。而canvas的渲染速度和性能更好，echerts在
canvas上构建一层MVC层，使得svg一样交互。
1. 课程目标
1.了解大数据可视化技术
1）什么是大数据可视化
2）数据可视化的应用场景与使用工具
3）数据可视化图标分析之10种场景
> 2.掌握Echarts核心组件
1）学会阅读Echarts官方文档搭建开发环境
2）掌握Echarts核心组件的适用于配置
3）掌握Echarts常用图的制作与注意事项
3.掌握Echarts高级用法
1）了解Echarts高级组件及使用技巧
2）Echarts图标混搭
3）了解异步数据加载
4）了解自定义主题
5）了解事件与行为
4.了解前后端数据展示
1）了解前后端数据交互的流程及管件步骤
2）通过综合项目案例熟练应用Echarts图表进行数据展示
2. 数据可视化概述
借助于图形化手段，能清晰有效的传达与沟通信息。以是觉得方式展示数据。
将结构或者是硅结构的数据适当的转化为可视化图表，将隐藏在数据里的信息展示在人们面前。
3. 什么是数据可视化
可分为可视化分析，科学可视化，信息可视化。
-
科学可视化：主要关注的是三维现象的可视化，比如气象学，生物学，重点在与对体，面以及光源等等的渲染。
-
信息可视化：将数据信息和知识转化为一种视觉形式，充分利用了人们对可是模式快速识别的自然之力。偏向于展示。
-
可视化分析：是科学可视化和信息可视化领域发展结合的产物。侧重于借助于交互式用户页面进行分析推理。偏向于分析。
数据接入--》数据整合--》数据处理--》= 干净的数据源 --》数据分析--》可视化--》数据展示
4. 经典可视化案例
-
全国主要城市空气质量
-
世界经济变迁
-
数据可视化商业案例集 www.storagelab.org.cn/zhangdi/201…
5. 大数据可视化的价值
大数据可视化主要是通过各类统计图、地图和动态效果
来生动地展示数据中各类变化，这种形式可以清晰直观
的将关键数据传达给业务人员和决策人员。
数据可视化是将数据用图形化的方式来表示，数据可视
化也是传达发现的有效方式，利用人类视觉的快速感知
直觉，支持更轻松的协作和更快的创新。
1. 更快的带来见解
数据可视化可以轻松发现趋势并更快地识别异常值。这些信息有助于了解业务的表现以及正在发展的机遇和风险。使每个人都能够快速，轻松地将数据转换为洞察力。
2.做出更明智，更快速的决策
数据可视化可以轻松发现趋势并更快地识别异常值。这些信息有助于了解业务的表现以及正在发展的机遇和风险。使每个人都能够快速，轻松地将数据转换为洞察力。
3. 通过高级分析为每个人提供支持
现在，您的组织可以从易于使用的交互式仪表板中受益，该仪表板具有内置的地理空间，联动和钻取分析，可以开发更深入的见解，发现隐藏的模式，并对高价值的商业机会采取行动。
4. 提高产品或服务的价值
数据具有令人难以置信的价值，但大多数用户没有时间或耐心去学习专业的商业智能工具。通过在你的应用和业务流程中嵌入DataFocus便捷的自助式分析能力，为用户提供方便，直观的数据。
5. 在自定义分析请求上花费的时间更少
保护您的技术团队不为每个报告或可视化编写自定义代码，也不需要重复的，耗时的任务。相反，允许他们专注于构建您的核心产品或服务，使最终用户能够通过DataFocus的问答式搜索，自己可视化并从数据中获取答案。
6. 数据可视化⼯具、案例、书籍
数据可视化⼯具
案例
书籍
7. Echarts概述
Echarts是一个纯JavaScript图标库，底层依赖于轻量级 的Canvas类库ZRender，基于BSD开原协议，是一款非常 优秀的可视化前端框架。通俗的来说，就是纯j实现，MV C封装，数据驱动。
8. ⼤数据可视化技术：可视化技术概述与Echarts⼊⻔
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
9. 如何快速上⼿开发⼀个Echarts可视化图表
1. 获取 ECharts
1. 从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。
2. 在 ECharts 的 GitHub 获取。
3. 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
4. 通过 jsDelivr 等 CDN 引入
2. 引入 ECharts
<script src="echarts.min.js"></script>
3. 绘制一个简单的图表
在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
</head>
<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]
}]
};
</body>
</html>
10.如何阅读Echarts官⽅⽂档
官方文档： echarts.baidu.com/echarts2/do…
简介：ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
11.Echarts学习必备基础知识
一 接口
echarts(enterprise charts 图标库)
二 图类
Bar：柱状图 line：折线图
Scatter：散点图 K：K线图
Pie：饼图 Radar：雷达图
Force：力导布局图
三 组件
Axis：坐标轴 Grid：网络 Polar：极坐标 Title：标题 Tooltip：提示 Legend：图例 data：值
四 基础库
zrender(canvas类库)
Echarts3.x与Echarts2.x的区别
echarts是百度推出的一个简单实用的图表控件，就个人看来，echarts2的大部分图表代码的可用性和美观性更好，相对而言，echarts3也有很多改进的地方，例如模块导入等和图标选项优化等，本人近期主要在用echarts做地图开发，就一些个人心得总结如下：
1、js文件： 首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详细，有专门的目录结构来存放相关的js文件及相关资源，但是在引入文件的时候往往会很不方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需的功能构架类库，使用时只要导入一个echarts.min.js文件就可以。
2、文件导入： 在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句
复制代码 接下去只要调用接口就可以了。
3、离线地图： echarts2中离线地图的精确度存在很大的问题，特别是下钻到区县一级，边界线存在模糊、交叉、空白等问题，并且经常出现飞地，与实际地图出入较大，个人认为基本没什么用，在echarts3中对此做了很大的改进，基本解决了以上问题，市与市之间、区县与区县之间基本上不存在衔接问题。 另外，在echarts3中可以根据需要自主构建地图，这个服务给实际使用提供了很大的便利。
4、工具栏： 在echarts3的toolbox里面把辅助线功能取消掉了，图标变小了，总体上感觉echarts3里面的toolbox更丑了。
5、地图漫游工具： 在echarts3里面把地图漫游工具取消掉了，说实话，echarts2里面的地图漫游工具看着还是挺不错的，虽然并没有什么用。
6、坐标系: echarts3中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例如，线性表以及树、图的节点列表的结构可以归一化为这样的二维数组：
echarts3中另一个重要的数据结构抽象是独立出了“坐标系”概念。事实上在 ECharts 2 中已经有grid、polar配置项存在，但是并不是按一个“坐标系”的理解去实现的。echarts3中，支持了直角坐标系（catesian，兼容 echarts2中的grid）、极坐标系（polar）、地理坐标系（geo）。
7、Option变动： 1）组件位置想x、y等变成了left、top,可以使用像素和百分比，适应性更强。
2）为了让结构更合理，echarts3中label被移出来和itemStyle平级。
13.Echarts基础架构与常⻅名词术语
基本名词
14.Echarts标准开发模板
> <!DOCTYPE html>
15. Echarts 柱状图详解
柱状图图解分析
实现
代码实现
script结构
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('_top'));
// 指定图表的配置项和数据
var option = {
//-------------- 标题 title ----------------
title: {
text: '主标题',
textStyle:{ //---主标题内容样式
color:'#fff'
},
subtext:'副标题', //---副标题内容样式
subtextStyle:{
color:'#bbb'
},
padding:[0,0,100,100] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
},
//---------------- 图例 legend -----------------
legend: {
type:'plain', //----图例类型，默认为'plain'，当图例很多时可使用'scroll'
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:'#fff', //----单独设置某一个图例的颜色
//backgroundColor:'black',//---单独设置某一个图例的字体背景色
}
}
],
},
//-------------- 提示框 -----------------
tooltip: {
show:true, //---是否显示提示框,默认为true
trigger:'item', //---数据项图形触发
axisPointer:{ //---指示样式
type:'shadow',
axis:'auto',
},
padding:5,
textStyle:{ //---提示框内容样式
color:"#fff",
},
},
//------------- grid区域 ----------------
grid:{
show:false, //---是否显示直角坐标系网格
top:80, //---相对位置，top\bottom\left\right
containLabel:false, //---grid 区域是否包含坐标轴的刻度标签
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:"#fff",
padding:[5,0,0,-5], //---坐标轴名称相对位置
},
nameGap:15, //---坐标轴名称与轴线之间的距离
//nameRotate:270, //---坐标轴名字旋转
axisLine:{ //---坐标轴 轴线
show:true, //---是否显示
//------------------- 箭头 -------------------------
symbol:['none', 'arrow'], //---是否显示轴线箭头
symbolSize:[8, 8] , //---箭头大小
symbolOffset:[0,7], //---箭头位置
//------------------- 线 -------------------------
lineStyle:{
color:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 5, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
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:'#fff',
width:1,
type:'solid',
},
},
axisTick:{ //---坐标轴 刻度
show:true, //---是否显示
inside:true, //---是否朝内
lengt:3, //---长度
lineStyle:{
//color:'red', //---默认取轴线的颜色
width:1,
type:'solid',
},
},
axisLabel:{ //---坐标轴 标签
show:true, //---是否显示
inside:false, //---是否朝内
rotate:0, //---旋转角度
margin: 8, //---刻度标签与轴线之间的距离
//color:'red', //---默认取轴线的颜色
},
splitLine:{ //---grid 区域中的分隔线
show:true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的
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: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
授人以渔01_Echarts配置项查看技巧
1、图表标题
title: {
x: 'left', // 水平安放位置，默认为左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主标题文字颜色
},
subtextStyle: {
color: '#aaa' // 副标题文字颜色
}
},
2、图例
legend: {
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
color: '#333' // 图例文字颜色
}
},
3、值域
dataRange: {
orient: 'vertical', // 布局方式，默认为垂直布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'left', // 水平安放位置，默认为全图左对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'bottom', // 垂直安放位置，默认为全图底部，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 值域边框颜色
borderWidth: 0, // 值域边框线宽，单位px，默认为0（无边框）
padding: 5, // 值域内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
itemHeight: 14, // 值域图形高度，线性渐变垂直布局高度为该值 * 10
splitNumber: 5, // 分割段数，默认为5，为0时为线性渐变
color:['#1e90ff','#f0ffff'],//颜色
//text:['高','低'], // 文本，默认为数值文本
textStyle: {
color: '#333' // 值域文字颜色
}
},
toolbox: {
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'right', // 水平安放位置，默认为全图右对齐，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
borderColor: '#ccc', // 工具箱边框颜色
borderWidth: 0, // 工具箱边框线宽，单位px，默认为0（无边框）
padding: 5, // 工具箱内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemSize: 16, // 工具箱图形宽度
featureImageIcon : {}, // 自定义图片icon
featureTitle : {
mark : '辅助线开关',
markUndo : '删除辅助线',
markClear : '清空辅助线',
dataZoom : '区域缩放',
dataZoomReset : '区域缩放后退',
dataView : '数据视图',
lineChart : '折线图切换',
barChart : '柱形图切换',
restore : '还原',
saveAsImage : '保存为图片'
}
},
Echarts拆线图详解，基本配置
标题
title: { left: 'center', text: '标题', },
图例
legend: { data: ['数据'], right: 'top' },
图片下载
toolbox: { feature: { saveAsImage: {} } },
X轴
boundaryGap属性值设置为false，x轴与网格线对齐 name属性值设置折线图X坐标轴名称
xAxis: {
type: "category",
boundaryGap: false,
data: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2001, 2002],
name: "year",
nameLocation:'middle',
nameTextStyle:{
fontSize:14,
fontWeight: 600,
padding:10
}
},
y轴
name属性值设置折线图Y坐标轴名称
yAxis: {
type: "value",
name: "data",
nameLocation:'middle',
nameTextStyle:{
fontSize:14,
fontWeight: 600,
padding:10
}
}
series
name属性值要与legend的data属性值保持一致
series: [ { data: [0.809, 0.786, 0.812, 0.881, 0.685, 0.417, 0.785, 0.845, 0.739, 0.818, 0.810], type: "line", name:"数据" } ]
18. Echarts拆线图详解，动态数据展示
官方实例
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: '大数据量面积图',
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
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',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name:'模拟数据',
type:'line',
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
}
},
data: data
}
]
};
从官方代码里可以，我们可以提取出 动态加载数据 的项 以及echarts 的初始化
myChart = echarts.init(document.getElementById('main'), 'infographic');//加载了主题
myChart.clear();
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: []
},
toolbox: {
feature: {
dataView: { show: false, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
grid: {
left: '5%',
right: '5%'
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisPointer: {
type: 'shadow'
},
data: [],// X轴的定义
axisLabel: {
interval: 0,//横轴信息全部显示
rotate: -30,//-30度角倾斜显示
}
}],
dataZoom: [
],
yAxis: [{
type: 'value',// Y轴的定义
min: 0,
max: '',
interval: '',
data: [],
axisLabel: {
formatter: '{value}'
}
}
, {
type: 'value',// Y轴的定义
name:'排班数',
}],
series: []
};
// 初次加载图表(无数据)
myChart.setOption(option);
完成了这一步之后，我们就可以根据自己的实际需要 动态加载数据 能采取的方法有很多 这里我使用的是ajax 请求 的数据
$.ajax({
url: "WebServers/.../GoodsInfo",
type: 'post',
dataType: 'json',
data: { CompanyName: CompanyName, dataOn: check_val },//参数
beforeSend: function () {
fnAjaxLoad(true);
},
complete: function () {
fnAjaxLoad();
},
success: function (data) {
jsons = data;
loadData();
},
error: function () {
alert("数据加载失败！");
}
});
function loadData() {
//折线图
var Item = function () {
return {
name: '',
type: 'line',
data: [],
yAxisIndex: 0,
markArea: {
}
}
} ;
/ /柱状图
var Bar = function () {
return {
name: '',
type: 'bar',
data: [],
yAxisIndex: 1,
barWidth: 20,
markArea: {
}
};
var legends = [];
var Series = [];
var str;
var json = jsons.setData;
//console.info(json);
var setCol = json[0].setColoer;
if (setCol != null && setCol !='') {
if (setCol[0].OneStateTime != null && setCol[0].OneStateTime != '') {
str = { data: [[{ name: '第一阶段', xAxis: setCol[0].OneStateTime }, { xAxis: setCol[0].OneEndTime }], [{ name: '第二阶段', xAxis: setCol[0].TwoStateTime }, { xAxis: setCol[0].TwoEndTime }]], itemStyle: { normal: { color: setCol[0].setColor } } };
//console.info(str);
}
}
//判断选中的数据类型
if (document.getElementsByName("bm")[0].checked) {
