以下参数都是写在option配置对象内，没有提及的配置参数欢迎查阅读echart参考手册。
一、
修改主标题和副标题
title : {
text: '未来一周气温变化',//写入主标题
subtext: '纯属虚构',//写入副标题
x:'left',//控制标题水平方向的位置'center' | 'left' | 'right' | {number}
y:'top',//控制标题垂直方向的位置'top' | 'bottom' | 'center' | {number}
textStyle:{
fontSize: 18,
fontWeight: 'bolder',
color: '#333'
},//标题字体样式
subtextStyle{
fontSize: 18,
fontWeight: 'bolder',
color: '#333'
},//副标题字体样式
},
二、
修改统计图的宽和高，以及位置和最外面的边框
grid:{
x:'10%',//控制统计图左上角的x坐标位置，可为数值单位是px，可用百分比
y:'10%',//控制统计图左上角y坐标的位置，可为数值单位是px，可用百分比
'80%',//控制统计图的宽度
height:'90%',//控制统计图的高度
borderWidth:0,//控制边框的线条粗细，为0则不显示
borderColor:'#ccc'//修改边框的线条颜色，如果borderWidth为0则不起作用
},
三、
x轴的样式控制（y轴同上）：
xAxis : [
{
type : 'category',//坐标轴类型，横轴默认为类目型'category'，纵轴默认为数值型'value'
data: ['A栋', 'B栋', 'C栋', 'D栋', 'E栋', 'F栋'],//x坐标轴上显示的数据
boundaryGap:true,//控制x轴的数值是否顶头，默认为true留空，false则顶头
splitLine: {//控制网格的线条样式
show:true,
lineStyle:{
color: '#48b',
2,
type: 'solid'
}
},
axisLine:{//x轴的样式控制
show: true, //显示与否
lineStyle:{//线条样式
color: '#48b',
2,
type: 'solid'
}
},
axisTick:{//控制x轴上的间隔突出的小线条样式
show:'true',//显示与否
lineStyle:{//线条样式
color: '#48b',
2,
type: 'solid'
}
},
axisLabel: {//控制x轴上的文字的样式
show: true,//显示与否
textStyle: { color: '#fff' },//控制x轴字体样式
formatter: '{value} °C',//轴上的数据带单位
}
}
]，
四、
鼠标移动到数据上出现线条的样式控制
tooltip : {
trigger: 'axis',
axisPointer:{
type: 'line',
lineStyle: {
color: '#929bb6',
1,
type: 'solid'
}
}
},
鼠标移动到数据上不出现线条出现阴影
tooltip: {
show: true,
trigger: 'axis',
axisPointer:{
type: 'shadow',
shadowStyle: {
color: 'rgba(88,101,137,0.3)',
'auto',
type: 'default'
}
}
},
五、
增加两条y轴，并且指定哪个个数据使用哪个y轴
yAxis : [
{
type : 'value',
splitNumber: 5, // 数值轴用，分割段数，默认为5
boundaryGap:[0,0],
splitLine:{lineStyle:{color:'#505a73'}},
axisLine:{show: false},
axisLabel: { show: true, textStyle: { color: '#fff' },formatter: '{value} ' }
},
{
type : 'value',
splitNumber: 5, // 数值轴用，分割段数，默认为5
boundaryGap:[0,0],
axisLine:{show: false},
splitLine:{lineStyle:{color:'#505a73'}},
axisLabel: { show: true, textStyle: { color: '#fff' },formatter: '{value} '},
show:'true',
position: 'right',//控制新y轴的位置
}
],
series : [
{
"name":"移动到达数",
"type":"bar",
"yAxisIndex":'1',//使用第二条y轴
"data":[5, 20, 40, 10, 10, 20,5, 20, 40, 10, 10, 20]
},
{
"name":"移动收入（万元）",
"type":"bar",
"yAxisIndex":'0',//指定第一条y轴，默认都为使用第一条
"data":[1.55, 2.90, 1.70, 9.10, 8.10, 1.90,5, 2.50, 4.30, 1.40, 1.10, 2.60]
}
]
六、
折线图上显示最大值最小值
series: [
{
name: '', // 系列名称
type: 'line', // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [18.618, 18.386, 18.961, 18.825, 18.643, 19.04],
symbolSize:6,//控制折线图上表示数值的图标的大小
symbol:'emptyCircle',//控制折线图上表示数值的样式
itemStyle: {
normal: {
lineStyle: {
color: '#8a92ad',
}
}
},
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
}
}
]
七、
图例的样式控制
legend: {
data:['宽带净增','渗透率'],
x:'right',//控制图例的位置
y:20,//控制图例的位置
textStyle: {// 图例文字样式
color: '#fff', // 图例文字颜色
fontSize:14
}
},
八、
轴上的数据太长，换行显示
xAxis: [ // 直角坐标系中横轴数组
{
// boundaryGap : false,
type: 'category', // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
data: ['福田区', '南山区', '罗湖区', '宝安区', '龙岗区', '坪大区', '龙华区', '光明区', '盐田区','蛇口通讯'],//轴上数据
axisLine:{show: false},//x轴
splitLine:{lineStyle:{color:'#505a73'}},//网格颜色
axisLabel: { show: true, textStyle: { color: '#BEC5D6' },
interval : 0,
formatter : function(params){//控制轴上数据换行显示
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 2;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "
";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName
}
}, //轴上字体颜色
axisTick:{show:false},
}
]
九、
easyui里面的tab使用统计图，统计图宽度无法自适应：
//解决tab里面统计图不按照div的百分百的宽度显示，overDetailFlowPack无法自适应的div的id
$("#overDetailFlowPack").css( 'width', $("#overDetailFlowPack").width() );
十、
问题：echart中统计图表被压缩不能正常地自适应。
（1）x轴数据为数组['array1'],如果赋值为字符串'array1',就会出现统计图不能正常展开的情况。
（2）使用jqueryEasyUi，tab切换显示不同的统计图，也会出现统计图被挤压变形的情况，解决方法是用js获取容器的宽度赋值给容器。
（3）在需要显示隐藏的模块中，一开始隐藏，点击显示的时候会看到统计图被挤压变形，此时，需要在点击显示模块的时候重新加载一次统计图便可以正常显示。
十一、
统计图上每个点都显示对应的数据
series : [
{
name:'视频用户（万）',
type:'bar',
itemStyle : { normal: {label : {show: true}}},//控制统计图上显示数据
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6,162.2, 32.6, 20.0, 6.4, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
},
{
name:'视频用户渗透率',
type:'line',
yAxisIndex: 1,
itemStyle : { normal: {label : {show: true,formatter:function(p){return p.value > 0 ? (p.value +'%'):'';}}}},//控制显示的数据为百分比数值
markLine : {
data : [
{type : 'average', name: '平均值'}//显示平均值水平线
]
},
data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4,23.0, 16.5, 12.0, 6.2, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5,12.0, 6.2]
}
]