24、echarts做报表
1、今天就来讲一讲echarts的使用
使用步骤
（1）首先需要下载包echarts.js，然后引入该包,
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>//echarts不需要依赖jquery
</header>
(2) 首先来一个散点图来做列子吧，具体的样式就是如下所示的样子
下边看一看具体的配置代码来着
//第一步调用echarts初始化函数,传入dom对象产生echarts的instance
<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'));
//第二步构造数据，这里采用echarts网站上的方式，直接copy构造500个随机数
var data1 = [];//数据区域缩放组件
var data2 = [];
var data3 = []; var random = function (max) {
return (Math.random() * max).toFixed(3);
}; for (var i = 0; i < 500; i++) {
data1.push([random(15), random(10), random(1)]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
};
//第三步就是使用echarts的option进行参数的配置，由于接到的任务是精通echarts。所以这里就对参数的配置写的比较啰嗦，大家见谅呀！哈哈哈哈
option = {
animation: false,//是否开启动画，默认是开启的，true是开启的,false是关闭的
legend: {
data: [
{
name:'scatter2',
icon:'circle',//强制设置图形长方形
textStyle:
{
color:'red'
}//设置文本为红色
},
{
name:'scatter',
icon:'rectangular',//强制设置图形为长方形
textStyle:
{
color:'red'
}//设置文本为红色
},
{
name:'scatter3',
icon:'rectangular',//强制设置图形为长方形
textStyle:
{
color:'red'
}//设置文本为红色
}
],
zlevel:5,//设置Canvas分层 zlevel值不同会被放在不同的动画效果中,传说中z值小的图形会被z值大的图形覆盖
z:3,//z的级别比zlevel低，传说中z值小的会被z值大的覆盖，但不会重新创建Canvas
left:'center',//图例组件离容器左侧的距离。可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
//如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
top:'top',
//rigth:'',
//bottom:''
width:'auto',//设置图例组件的宽度，默认值为auto,好像只能够使用px
orient:'horizontal',//设置图例组件的朝向默认是horizontal水平布局，'vertical'垂直布局
align:'auto',//'left' 'right'设置图例标记和文本的对齐，默认是auto
//默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 //'vertical'）的时候为右对齐，及为 'right'。
padding:[20,20,20,20],//设置图例内边距 默认为上下左右都是5，接受数组分别设定
itemGap:20,//图例每项之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔。默认为10
itemWidth:30,//图例标记的图形宽度，默认为25
itemHeight:20,//图例标记的图形高度，默认为14
//formatter:'Legend {name}'//图例文本的内容格式器，支持字符串模板和回调函数两种形式。
formatter:function(name){
return 'Legend '+name;
},
//selectedMode:false,//图例的选择模式，默认为开启，也可以设置成single或者multiple
//selectedMode:'single'//图例的选择模式，默认为开启，也可以设置成single或者multiple
selectedMode:'multiple',//图例的选择模式，默认为开启，也可以设置成single或者multiple
inactiveColor:'#ccc',//图例关闭时的颜色，默认是'#ccc'
selected:{
'scatter2':true,//设置图例的选中状态
'scatter':false,
'scatter3':false
},
tooltip: {//图例的tooltip 配置，默认不显示,可以在文件较多的时候开启tooltip对文字进行剪切
show: true
},
//backgroundColor:'rgb(128, 128, 128)',//图例的背景颜色，默认为透明的
//borderColor:'rgb(10, 150, 200)',//图例的边框颜色
//borderWidth:2,//图列的边框线宽，默认为1
shadowBlur:30,//图例阴影的模糊大小
shadowColor:'rgb(128, 128, 56)'//阴影的颜色
},
tooltip: {
},
grid:{
show:true,//是否显示直角坐标系的网格,true显示，false不显示
left:100,//grid组件离容器左侧的距离
containLabel:false,//grid 区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器有比较小无法预留较多空间的时候，可以设为 true 防止标签溢出容器。 },
xAxis: {
type: 'value',
min: 'dataMin',
name:'xAxis',//x轴的名称
nameLocation:'end',//x轴名称的显示位置'middle'，'end'
nameRotate:30,//坐标轴名字旋转角度值
max: 'dataMax',
gridIndex:0,//x轴所在的grid的索引，默认位于第一个grid
//offset:10,//x轴相对默认位置的偏移，在一个grid中含有多个grid的时候有意义
type:'value',//数值轴适用于连续型数据
//'category'类目轴 适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
//'time' //时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
//'log' 对数轴。适用于对数数据。
position:'top',//x轴位于grid的上方还是下方，默认为bottom在下方
inverse:false,//是否反向坐标
boundaryGap:['20%','20%'],//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
//类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
//非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效
splitLine: {
show: true
}
},
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'inside',
yAxisIndex: [0],
start: 29,
end: 36
}
],
visualMap: {
//type: 'continuous',//类型为连续型。
min: 0,//指定 visualMapContinuous 组件的允许的最小值。'min' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
max: 1000000,//指定 visualMapContinuous 组件的允许的最大值。'max' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
//setOption 改变 min、max 时 range 的自适应
text:['High','Low'],//两端的文本['High', 'Low']
range:[0, 800000],//指定手柄对应数值的位置
calculable:true,//表示是否设置了拖拽用的手柄，如果为false则拖拽结束时，才更新视图。如果为ture则拖拽手柄过程中实时更新图表视图。
realtime: false,//表示拖拽时是否实时更新
inverse:false,//是否翻转组件
precision:2,//展式的小数点精度
itemWidth:30,//长条的宽度，默认为20
itemHeight:200,//长条的高度，默认是140
align:'left',//组件中手柄和文字的摆放位置'auto' (orient 为 horizontal 时有效) 'left' 'right' （rient 为 vertical 时有效。）'top' 'bottom'
textGap:20,//两端文字与主体之间的距离
show:true,//是否显示数据映射组件
dimension:0,//指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组，
seriesIndex:0,//指定去哪个系列的数据
hoverLink:true,//打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
//反之，鼠标悬浮到图表中的图形元素上时，在 visualMap 组件的相应位置会有三角提示其所对应的数值。
//inRange: {//能定义目标系列（参见 visualMap-continuous.seriesIndex）视觉形式，也同时定义了 visualMap-continuous 本身的视觉样式。
//视觉通道
//inRange 中，可以有任意几个的『视觉通道』定义（如 color、symbolSize 等）。这些视觉通道，会被同时采用。
//一般来说，建议使用 透明度（opacity） ，而非 颜色透明度（colorAlpha） （他们细微的差异在于，前者能也同时控制图元中的附属物（如 label）的透明度，而后者只能控制图元本身颜色的透明度）。
//视觉映射的方式：支持两种方式：线性映射、查表映射。
//线性映射 表示 series.data 中的每一个值（dataValue）会经过线性映射计算，从 [visualMap.min, visualMap.max] 映射到设定的 [visual value 1, visual value 2] 区间中的某一个视觉的值（下称 visual value）。
//查表映射 表示 series.data 中的所有值（dataValue）是可枚举的，会根据给定的映射表查表得到映射结果。
/*color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]//图元的大小。*/
// 表示 目标系列 的视觉样式。 //},
/*target: {
inRange: {
symbol: 图元的图形类别。
symbolSize: 图元的大小。
color: 图元的颜色。
colorAlpha: 图元的颜色的透明度。
opacity: 图元以及其附属物（如文字标签）的透明度。
colorLightness: 颜色的明暗度，参见 HSL。
colorSaturation: 颜色的饱和度，参见 HSL。
colorHue: 颜色的色调，参见 HSL。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200] }
},*/
// 表示 visualMap-continuous 本身的视觉样式。
/*controller: {visualMap 组件中，控制器 的 inRange outOfRange 设置。如果没有这个 controller 设置，控制器 会使用外层的 inRange outOfRange 设置；如果有这个 controller 设置，则会采用这个设置。适用于一些控制器视觉效果需要特殊定制或调整的场景。
inRange: {
symbolSize: [30, 100],
symbol:['circle', 'rect', 'diamond'],
color: ['#121122', 'rgba(3,4,5,0.4)', 'red']
}
},*/
type:'piecewise',//表示分段型视觉映射组件（visualMapPiecewise）
splitNumber:10,//对于连续型数据，自动切分成几段默认是5段
pieces: [//每一段的范围，以及每一段的文字，以及每一段的特别的样式
{min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200（自定义label）'},
{value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
{max: 5} // 不指定 min，表示 min 为无限大（-Infinity）。
],
min:2,//指定 visualMapPiecewise 组件的最小值。
max:5,//指定 visualMapPiecewise 组件的最大值。
selectedMode:'multiple',//(多选)(单选)
inverse:false,//是否反转
precision:2,//数据展示的小数精度
itemWidth:20,//图形的宽度，即每个小块的宽度。
itemHeight:20,//图形的高度，即每个小块的高度
text:['High', 'Low'],//两端的文本
align:'auto',// 自动决定。'left' 图形在左文字在右。'right' 图形在右文字在左。
textGap:20,//两端文字主体之间的距离
itemGap:10,//每两个图元之间的间隔距离，单位为px。
itemSymbol:'circle',//图形的形状 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
show:true,//是否显示组件
dimension:0,//指定用数据的『哪个维度』，映射到视觉元素上。
seriesIndex:0,//指定取哪个系列的数据，即哪个系列的 series.data。
hoverLink:true,//打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
//inRange://参考visualMapContinuous
//outOfRange://参考visualMapContinuous*/
/*categories: [//用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集。
'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
],*/
/*inRange: {
// visual value 可以配成 Object：
color: {
'Warden': 'red',
'Demon Hunter': 'black',
'': 'green' // 空字串，表示除了'Warden'、'Demon Hunter'外，都对应到 'green'。
},
// visual value 也可以只配一个单值，表示所有都映射到一个值，如：
color: 'green',
// visual value 也可以配成数组，这个数组须和 categories 数组等长，
// 每个数组项和 categories 数组项一一对应：
color: ['red', 'black', 'green', 'yellow', 'white']
},*/
/*outOfRange:{//定义 在选中范围外 的视觉元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
olor: ['orangered','yellow','lightskyblue']*/
},
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',//散点图
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
};
2、下边来一个中国地图，不知道为什么数据没有加上去
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.js"></script>
<script src="china.js"></script>
</header>
<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'));
//myChart.showLoading();//提供简单的加载动画
/*$.get('data.json').done(function (data) {//echarts动态加载数据
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});*/ /*var data1 = [];//数据区域缩放组件
var data2 = [];
var data3 = []; var random = function (max) {
return (Math.random() * max).toFixed(3);
}; for (var i = 0; i < 500; i++) {
data1.push([random(15), random(10), random(1)]);
data2.push([random(10), random(10), random(1)]);
data3.push([random(15), random(10), random(1)]);
} option = {
animation: false,//是否开启动画，默认是开启的，true是开启的,false是关闭的
legend: {
data: [ {
name:'scatter2',
icon:'circle',//强制设置图形圆形
textStyle:
{
color:'red'
}//设置文本为红色
},
{
name:'scatter',
icon:'rectangular',//强制设置图形为长方形
textStyle:
{
color:'red'
}//设置文本为红色
},
{
name:'scatter3',
icon:'rectangular',//强制设置图形为长方形
textStyle:
{
color:'red'
}//设置文本为红色
}
],
zlevel:5,//设置Canvas分层 zlevel值不同会被放在不同的动画效果中,传说中z值小的图形会被z值大的图形覆盖
z:3,//z的级别比zlevel低，传说中z值小的会被z值大的覆盖，但不会重新创建Canvas
left:'center',//图例组件离容器左侧的距离。可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
//如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
top:'top',
//rigth:'',
//bottom:''
width:'auto',//设置图例组件的宽度，默认值为auto,好像只能够使用px
orient:'horizontal',//设置图例组件的朝向默认是horizontal水平布局，'vertical'垂直布局
align:'auto',//'left' 'right'设置图例标记和文本的对齐，默认是auto
//默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 //'vertical'）的时候为右对齐，及为 'right'。
padding:[20,20,20,20],//设置图例内边距 默认为上下左右都是5，接受数组分别设定
itemGap:20,//图例每项之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔。默认为10
itemWidth:30,//图例标记的图形宽度，默认为25
itemHeight:20,//图例标记的图形高度，默认为14
//formatter:'Legend {name}'//图例文本的内容格式器，支持字符串模板和回调函数两种形式。
formatter:function(name){
return 'Legend '+name;
},
//selectedMode:false,//图例的选择模式，默认为开启，也可以设置成single或者multiple
//selectedMode:'single'//图例的选择模式，默认为开启，也可以设置成single或者multiple
selectedMode:'multiple',//图例的选择模式，默认为开启，也可以设置成single或者multiple
inactiveColor:'#ccc',//图例关闭时的颜色，默认是'#ccc'
selected:{
'scatter2':true,//设置图例的选中状态
'scatter':false,
'scatter3':false
},
tooltip: {//图例的tooltip 配置，默认不显示,可以在文件较多的时候开启tooltip对文字进行剪切
show: true
},
//backgroundColor:'rgb(128, 128, 128)',//图例的背景颜色，默认为透明的
//borderColor:'rgb(10, 150, 200)',//图例的边框颜色
//borderWidth:2,//图列的边框线宽，默认为1
shadowBlur:30,//图例阴影的模糊大小
shadowColor:'rgb(128, 128, 56)'//阴影的颜色
},
tooltip: {
},
grid:{
show:true,//是否显示直角坐标系的网格,true显示，false不显示
left:100,//grid组件离容器左侧的距离
containLabel:false,//grid 区域是否包含坐标轴的刻度标签，在无法确定坐标轴标签的宽度，容器有比较小无法预留较多空间的时候，可以设为 true 防止标签溢出容器。
},
xAxis: {//x坐标轴
min: 'dataMin',//坐标轴刻度最小值，在类目轴中无效。
//可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
//不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
name:'xAxis',//x轴的名称
nameLocation:'end',//x轴名称的显示位置'middle'，'end'
nameRotate:30,//坐标轴名字旋转角度值
max: 'dataMax',
gridIndex:0,//x轴所在的grid的索引，默认位于第一个grid
//offset:10,//x轴相对默认位置的偏移，在一个grid中含有多个grid的时候有意义
type:'value',//数值轴适用于连续型数据
//'category'类目轴 适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
//'time' //时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
//'log' 对数轴。适用于对数数据。
position:'bottom',//x轴位于grid的上方还是下方，默认为bottom在下方
inverse:false,//是否反向坐标
boundaryGap:['20%','20%'],//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
//类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
//非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效
scale:false,//只在数值轴中（type: 'value'）有效,是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
//splitNumber:10,//默认为5，坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
minInterval:1,//minInterval自动计算的坐标轴最小间隔大小。例如可以设置成1保证坐标轴分割刻度显示成整数。
interval:0.5,//强制设置坐标轴分割的间隔
//silent:true,//坐标轴是否静态无法交互
triggerEvent:true,//坐标轴的标签是否响应和触发鼠标事件，默认不响应。
/*事件参数如下：
{
// 组件类型，xAxis, yAxis, radiusAxis, angleAxis
// 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化过的刻度值, 点击刻度标签有效
value: '',
// 坐标轴名称, 点击坐标轴名称有效
name: ''
}
*/
/*axisLine:{//坐标轴线
show:true,//是否显示坐标轴线
onZero:true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
lineStyle:{
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//坐标轴线的颜色
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}], false),
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
//color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [...], false)
// 纹理填充
//color: new echarts.graphic.Pattern(
//imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
//'repeat' // 是否平铺, 可以是 repeat-x, repeat-y, no-repeat
//)
width:1,//坐标线的线宽
type:'dashed',//坐标轴线的类型'dashed','solid','dotted'
shadowColor: 'rgba(0, 0, 0, 0.5)',//图形影音的模糊颜色
shadowBlur:10,//图像阴影的模糊大小
opacity:0.5//图形的透明度，为0的时候不绘制该图形
}
},
axisTick:{//坐标轴刻度线的相关设置
show:true,//是否显示刻度线
alignWithLabel:true,//类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。
interval:1,//坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
//默认会采用标签不重叠的策略间隔显示标签。
//可以设置成 0 强制显示所有标签。
//如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
inside:true,//坐标轴刻度是否朝内，默认朝外。
length:5,//坐标轴刻度的长度
lineStyle:{
width:1,//坐标轴刻度线的宽度
type:'dashed',
color:'blue'
}
},
axisLabel:{//标签上文字的设置
show:true,//是否显示刻度标签
interval:10,//刻度标签间的间距
inside:false,//刻度标签是否朝内，默认朝外
//rotate:10,//刻度标签的旋转角度
margin:5,//刻度标签与轴线之间的距离
formatter:'{value} kg',//刻度标签的内容格式
textStyle:{
//color:'green',
fontStyle:'normal',//标签上文字字体的风格'oblique'，'normal'是否加粗
fontWeight:'lighter',//标签上文字字体的粗细100 | 200 | 300 | 400，'bold'，'bolder'，'lighter'
//fontFamily:'GB-2312',//文字的字体
fontSize:14 /*color: function (val) {
return val >= 0 ? 'green' : 'red';
}
}
},
splitLine:{//坐标轴在grid区域中的分隔线
show:'true',//是否显示分隔线
interval:1,//分隔线的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
//默认会采用标签不重叠的策略间隔显示标签。
//可以设置成 0 强制显示所有标签。
lineStyle: {
// 使用深浅的间隔色
color: '#aaa',
width:1,//设置间隔线的线宽
type:'dashed'//设置间隔线的类型'solid'，'dotted'
}
},
splitArea:{//坐标轴在grid区域中的分隔区域，默认情况下是不显示的
interval:1,//设置显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
//默认会采用标签不重叠的策略间隔显示标签。
show:true,//是否分隔区域
areaStyle:{//分隔区的样式设计
color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
}
}*/
/*data:[{//类目数据，在类目轴（type: 'category'）中有效。
value: '周一',//单个类目的名称
// 突出周一
textStyle: {//类目标签的文字样式
fontSize: 20,
color: 'red',//文字的颜色。
align:'left',//文字的对齐方式，默认自动'center','right'
baseline:'top',//文字基线的对齐方式'middle'默认自动'bottom'
fontStyle:'normal',//文字的字体风格'italic','oblique'
fontWeight:'normal'//文字的粗细'bold'，'bolder'，'lighter'
//fontFamily:'',//文字的字体系列
fontSize:14//文字的字体大小
}
},{
value: '周二',
// 突出周二
textStyle: {
fontSize: 20,
color: 'red'
}
},{
value: '周三',
// 突出周三
textStyle: {
fontSize: 20,
color: 'red'
}
}
]
},*/
/*yAxis: {//y坐标轴
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},*/
/*polar:{//极坐标轴
zlevel:5,//Canvas分层
z:3,//所有图形的z值，z值小的会被z值大的覆盖
center:['50%','50%'],//极坐标的中心,默认是50%,50%
radius:[]//极坐标的半径，第一项是内半径，第二项是外半径
},
radiusAxis:{//极坐标的半径轴所在的极坐标系的索引，默认是在第一个坐标系中
polarIndex:0,
type:'value',//极坐标数据的类型'category'，'time'，'log'
name:'rou',//坐标轴的名称
nameLocation:'start',//坐标轴显示的位置'middle''end'
nameTextStyle:{//坐标轴名称的文字样式。
color:'bule',
fontStyle:'normal',//'italic''oblique'
fontWeight:'normal',//'bold''bolder''lighter'
fontFamily:'gb-2312',//文字字体
fontSize:14//文字大小 },
nameGap:20,//坐标轴名称与轴线之间的距离。
nameRotate:30,//坐标轴名字旋转角度值
inverse:true,//是否反向坐标轴
boundaryGap:20,//坐标轴两边留白策略
剩下属性参考xAxis
},*/
/*angleAxis:{//极坐标轴的角度轴
startAngle:90,//刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
clockwise:true,//刻度的增长是否按顺时针，默认为true
type:'value',//坐标轴的类型'category'，'time' ，'log'
//其余的属性参考xAxis },*/
/*radar:{//雷达图的坐标组件，只能使用在雷达图中
zlevel:3,
z:12,
center:['50%','50%'],//组件的坐标
radius:'80%',//组件的半径，相对于容器高宽中较小的一项的一半。
//其余的属性参考xAxis
indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度）
{
name: '销售（sales）',//指示器的名称
max: 6500,//指示器的最大值
min:0,//指示器的最小值
},
{ name: '管理（Administration）', max: 16000},
{ name: '信息技术（Information Techology）', max: 30000},
{ name: '客服（Customer Support）', max: 38000},
{ name: '研发（Development）', max: 52000},
{ name: '市场（Marketing）', max: 25000}
]
},*/
/*dataZoom: [//区域缩放组件
{
type: 'slider',
show: true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
//backgroundColor:'rgba(20,89,150,0.25)',//组件的背景颜色
dataBackground:{//数据阴影的样式
lineStyle:{//阴影的线条样式
color:'blue',
width:1,//线宽
type:'solid',//'dashed','dotted'
},
areaStyle:{//阴影的填充样式
color: 'red',
opacity:1
} },
//fillerColor:'yellow',//选中范围的填充颜色
borderColor:'gray',
//handleIcon:'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8',//手柄icon的形状
//默认为M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z
handleSize:'80%',//控制手柄的宽度默认是100%
handleStyle:{//手柄的配置样式
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
},
labelPrecision:2,//显示label的小数点位数
labelFormatter:function (value) {//格式化显示器
return '最终的值为' + value; // 返回最终的label内容。
},
showDetail:true,//拖拽时显示详细信息
showDataShadow:'false',//是否在拖动的时候显示数据阴影
realtime:true,//在拖动的时候是否实时更新系列的数据 xAxisIndex: [0],
filterMode:'filter',//'empty'
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',//所谓『内置』，即内置在坐标系中。平移：在坐标系中滑动拖拽进行数据区域平移。
xAxisIndex: [0],//组件控制的 x轴,如果有多个图则表示这个 dataZoom 组件控制 第一个 xAxis
filterMode:'filter',//当前数据窗口外的数据，被 过滤掉。即会影响其他轴的数据范围。
//'empty'当前数据窗口外的数据，被 设置为空。即不会影响其他轴的数据范围。
start: 1,//数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
end: 35,//数据窗口范围的结束百分比。范围是：0 ~ 100。
//startValue:20,//数据窗口范围的起始数值。如果设置了 dataZoom-inside.start 则 startValue 失效。
//orient:'horizontal',//'vertical'布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。
zoomLock:true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:110//设置触发视图刷新的频率。单位为毫秒（ms）。
},
{
type: 'inside',
yAxisIndex: [0],
start: 29,
end: 36
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',//散点图
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
};*/
//dataZoom 组件是对 数轴（axis） 进行『数据窗口缩放』『数据窗口平移』操作。
//可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。
//dataZoom[i]-inside内置型数据区域缩放组件
//设置 dataZoom-inside 组件控制的 x轴（即xAxis，是直角坐标系中的概念，参见 grid）。
// 不指定时，当 dataZoom-inside.orient 为 'horizontal'时，默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
// 如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
/*option: {
xAxis: [
{...}, // 第一个 xAxis
{...}, // 第二个 xAxis
{...}, // 第三个 xAxis
{...} // 第四个 xAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
xAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 xAxis
},
{ // 第二个 dataZoom 组件
xAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 xAxis
}
]
}
option: {
yAxis: [
{...}, // 第一个 yAxis
{...}, // 第二个 yAxis
{...}, // 第三个 yAxis
{...} // 第四个 yAxis
],
dataZoom: [
{ // 第一个 dataZoom 组件
yAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis
,
{ // 第二个 dataZoom 组件
yAxisIndex: 3 // 表示这个 dataZoom 组件控制 第四个 yAxis
}
]
} */ // 指定图表的配置项和数据
/*var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',//柱状图
data: [5, 20, 36, 10, 10, 20]
}]
};*/
//绘制饼图
/*var option={
backgroundColor: '#2c343c',//设置全局的背景颜色
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},//设置全局的文本颜色
label: {//设置显示标签的背景颜色
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
}
},
labelLine: {//设置显示标签线的背景颜色
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
series : [{
name: '访问来源',
type: 'pie',//饼状图
radius: '55%',
roseType: 'angle',//设置成南丁格尔图, visualMap: {//将数值的大小映射到饼图的明暗度上
// 不显示 visualMap 组件，只用于明暗度的映射
show: false,
// 映射的最小值为 80
min: 80,
// 映射的最大值为 600
max: 600,
inRange: {
// 明暗度的范围是 0 到 1
colorLightness: [0, 1]
}
}, itemStyle: {
normal: { //设置阴影的大小，颜色，水平偏移，垂直偏移
// 设置扇形的颜色
//color: '#c23531',
// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 90,60, 180.5)'
},
emphasis: { //在鼠标移入时进行背景显示
shadowBlur: 200,
shadowColor: 'rgba(50, 60, 30, 0.5)'
}
}, data:[
{value:400, name:'搜索引擎',
itemStyle: {
normal: {
color: 'c23531'//分别设置扇形区域的颜色
}
}
},
{value:335, name:'直接访问',
itemStyle:{
normal: {
color: 'c23435'
}
}
},
{value:310, name:'邮件营销',
itemStyle:{
normal: {
color: 'c23529'
}
} },
{value:274, name:'联盟广告',
itemStyle:{
normal: {
color: 'c23528'
}
}
},
{value:235, name:'视频广告',
itemStyle:{
normal: {
color: 'c23527'
}
}
}
] }]
};*/ //visualMap视觉映射
option = {
title : {
text: 'World Population (2010)',
subtext: 'from United Nations, Total population, both sexes combined, as of 1 July (thousands)',
sublink : 'http://esa.un.org/wpp/Excel-Data/population.htm',
left: 'center',
top: 'top'
},
tooltip : {
trigger: 'item',
formatter : function (params) {
var value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,')
+ '.' + value[1];
return params.seriesName + '<br/>' + params.name + ' : ' + value;
}
},
toolbox: {
show : true,
orient : 'vertical',
left: 'right',
top: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
visualMap: {
//type: 'continuous',//类型为连续型。
min: 0,//指定 visualMapContinuous 组件的允许的最小值。'min' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
max: 100,//指定 visualMapContinuous 组件的允许的最大值。'max' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
//setOption 改变 min、max 时 range 的自适应
text:['High','Low'],//两端的文本['High', 'Low']
range:[0, 100],//指定手柄对应数值的位置
calculable:true,//表示是否设置了拖拽用的手柄，如果为false则拖拽结束时，才更新视图。如果为ture则拖拽手柄过程中实时更新图表视图。
realtime: false,//表示拖拽时是否实时更新
inverse:false,//是否翻转组件
precision:2,//展式的小数点精度
itemWidth:30,//长条的宽度，默认为20
itemHeight:200,//长条的高度，默认是140
align:'left',//组件中手柄和文字的摆放位置'auto' (orient 为 horizontal 时有效) 'left' 'right' （rient 为 vertical 时有效。）'top' 'bottom'
textGap:20,//两端文字与主体之间的距离
show:true,//是否显示数据映射组件
dimension:1,//指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组，
seriesIndex:1,//指定去哪个系列的数据
hoverLink:true,//打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
//反之，鼠标悬浮到图表中的图形元素上时，在 visualMap 组件的相应位置会有三角提示其所对应的数值。
//inRange: {//能定义目标系列（参见 visualMap-continuous.seriesIndex）视觉形式，也同时定义了 visualMap-continuous 本身的视觉样式。
//视觉通道
//inRange 中，可以有任意几个的『视觉通道』定义（如 color、symbolSize 等）。这些视觉通道，会被同时采用。
//一般来说，建议使用 透明度（opacity） ，而非 颜色透明度（colorAlpha） （他们细微的差异在于，前者能也同时控制图元中的附属物（如 label）的透明度，而后者只能控制图元本身颜色的透明度）。
//视觉映射的方式：支持两种方式：线性映射、查表映射。
//线性映射 表示 series.data 中的每一个值（dataValue）会经过线性映射计算，从 [visualMap.min, visualMap.max] 映射到设定的 [visual value 1, visual value 2] 区间中的某一个视觉的值（下称 visual value）。
//查表映射 表示 series.data 中的所有值（dataValue）是可枚举的，会根据给定的映射表查表得到映射结果。
/*color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]//图元的大小。*/
// 表示 目标系列 的视觉样式。 //},
/*target: {
inRange: {/**
symbol: 图元的图形类别。
symbolSize: 图元的大小。
color: 图元的颜色。
colorAlpha: 图元的颜色的透明度。
opacity: 图元以及其附属物（如文字标签）的透明度。
colorLightness: 颜色的明暗度，参见 HSL。
colorSaturation: 颜色的饱和度，参见 HSL。
colorHue: 颜色的色调，参见 HSL。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [60, 200] }
},
// 表示 visualMap-continuous 本身的视觉样式。
controller: {
inRange: {
symbolSize: [30, 100],
symbol:['circle', 'rect', 'diamond'],
color: ['#121122', 'rgba(3,4,5,0.4)', 'red']
}
},*/
type:'piecewise',//表示分段型视觉映射组件（visualMapPiecewise）
categories: [
'china GDP', 'higher GDP in China'
],
inRange: {
// visual value 可以配成 Object：
color: {
'china GDP': 'red',
'higher GDP in China': 'black',
'': 'green' // 空字串，表示除了'Warden'、'Demon Hunter'外，都对应到 'green'。
}/*,
// visual value 也可以只配一个单值，表示所有都映射到一个值，如：
color: 'green',
// visual value 也可以配成数组，这个数组须和 categories 数组等长，
// 每个数组项和 categories 数组项一一对应：
color: ['red', 'black']*/
},
color: ['orangered','yellow']
},
series : [
{
name: 'china GDP',
type: 'map',
mapType: 'china',
//roam: true,
itemStyle:{
emphasis:{label:{show:true}}
},
data:[
{name: "咸阳", value: 43},
{name: "铜川", value: 44}
]
},{
name: 'higher GDP in China',
type: 'map',
mapType: 'china',
//roam: true,
itemStyle:{
emphasis:{label:{show:true}}
},
data:[
{name: "东营", value: 62},
{name: "牡丹江", value: 63},
{name: "遵义", value: 63},
{name: "绍兴", value: 63},
{name: "扬州", value: 64},
{name: "常州", value: 64},
{name: "潍坊", value: 65} ]
}
]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
24、echarts做报表的更多相关文章
- 在大型软件中用Word做报表： 书签的应用
本文转载:http://www.cnblogs.com/huyong/archive/2011/08/24/2151599.html 报表基本上在每一个项目中占有很大的比例,做报表也是我们开发人员必须 ...
- 号外号外：9月13号《Speed-BI云平台案例实操--十分钟做报表》开讲了
引言:如何快速分析纷繁复杂的数据?如何快速做出老板满意的报表?如何快速将Speed-BI云平台运用到实际场景中? 本课程将通过各行各业案例背景,将Speed-BI云平台运用到实际场景中 ...
- orale做报表常用函数和表达式的总结
最近一段时间连续的做了几十张报表,通过原生sql对数据进行分析 ,也算是有了一定的了解,发现其中一些函数和表达式使用频率较高,现总结如下: (1).round()函数 round函数说白了就是把一 ...
- 做报表需要知道的基本的SQL语句
为客户做报表需要操作数据库,基本的SQL是必须要掌握的,下面介绍做报表最常用的SQL语句. 方法/步骤 1 查询数据:编号表示查询顺序. (8) select (9) distinct (11 ...
- echarts图形报表缓存问题(option数据缓存)
这几天我在工作中用到了echarts开发报表.每次查询出来的数据都是新的,但是echart展现的图形报表却还是之前的数据.网上找了搜索了很多次也没能解决,后面加了技术群才解决的. 我开始已经确定是报表 ...
- 【BIEE】使用BIPublisher做报表时，选择多个参数使用IN的问题
在使用BIPublisher做报表的时候,报表出现xml数据加载错误的情况 环境描述 仪表盘提示是表示变量,并且支持多选 报表使用xdo方式制作的,直接使用JDBC直连数据库获取数据 数据集中的SQL ...
- winform 使用 ReportViewer做报表
之前用过的水晶报表觉得有些麻烦,因此尝试了使用微软自带的报表. 第一种方法是 在winform界面上放置ReportViewer界面,相关的代码如下: public DataTable dt; pri ...
- 5、VS2010+ASP.NET MVC4+EF4+JqueryEasyUI+Oracle该项目的开发——使用datagrid做报表
来点需要:我使用的数据库访问EF框架,但是,因为使用一个动态表来的统计报告中.单独是每天产生基于数据表,它是很难使用EF加盟前.所以我包装在两组数据库存取层的框内,一个是EF,一种是传统的ADO.NE ...
- 最近学习了下BI（商业智能）做报表
最近公司购买了Style intelligence 出的BI报表工具,接触新的东西不是很容易上手,这个东西是别的项目组用的,我们项目组由于进度比较快就让我先到他们项目组帮他们,为了使用这个东西,他们已 ...
随机推荐
- rocketmq集群、配置详解和常用命令
集群原文地址: http://www.cnblogs.com/520playboy/p/6716235.html 常用命令原文地址: http://www.cnblogs.com/gmq-sh/p/6 ...
- 关于I2C和SPI总线协议【转】
关于I2C和SPI总线协议 IICvs SPI 现今,在低端数字通信应用领域,我们随处可见IIC (Inter-Integrated Circuit) 和 SPI (Serial Peripheral ...
- 80、tensorflow最佳实践样例程序
''' Created on Apr 21, 2017 @author: P0079482 ''' #-*- coding:utf-8 -*- import tensorflow as tf #定义神 ...
- spss-数据清洗-处理重复数据
spss-数据清洗-处理重复数据 数据导入之后就需要对数据进行清洗.数据清洗主要是对多余重复的数据筛选清除,将缺失的数据补充完整,将错误的数据纠正或者删除.接下来操作如何将重复数据处理操作. 步骤一: ...
- Area--->AreaRegister.RegisterAllArea()与Area区域的解析
文章引导 MVC路由解析---IgnoreRoute MVC路由解析---MapRoute MVC路由解析---UrlRoutingModule Area的使用 Area--->AreaRegi ...
- 03 java语言基础逻辑运算符
03.01_Java语言基础(逻辑运算符的基本用法) A:逻辑运算符有哪些 &,|,^,! &&,|| B:案例演示 逻辑运算符的基本用法 注意事项: a:逻辑运算符一般用于连 ...
- nodeType介绍及应用示例
一,DOM中的节点类型介绍 DOM将一份文档抽象为一棵树,而树又由众多不同类型的节点构成. 元素节点是DOM中的最小单位节点,它包括了各种标签,比如表示段落的p,表示无序列表的ul等. 文本节点总是被 ...
- Linux NIO 系列(04-4) select、poll、epoll 对比
目录 一.API 对比 1.1 select API 1.2 poll API 1.3 epoll API 二.总结 2.1 支持一个进程打开的 socket 描述符(FD)不受限制(仅受限于操作系统 ...
- sql server日志传送实践（基于server 2008 R2）
SQL Server 2008 R2 主从数据库同步 相关参考:http://blog.itpub.net/30126024/viewspace-2639526/ sql server日志传送(基于s ...
- 通往大神之路，百度Java面试题前200页。
基本概念 操作系统中 heap 和 stack 的区别 什么是基于注解的切面实现 什么是 对象/关系 映射集成模块 什么是 Java 的反射机制 什么是 ACID BS与CS的联系与区别 Cookie ...