echart使用总结

　　以下参数都是写在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，可用百分比

width:'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',
　　　　width: 2,
　　　　type: 'solid'
　　}

},
axisLine:{//x轴的样式控制

　　show: true,　//显示与否

　　lineStyle:{//线条样式

　　　　color: '#48b',
　　　　width: 2,
　　　　type: 'solid'
　　}

},

axisTick:{//控制x轴上的间隔突出的小线条样式

　　show:'true',//显示与否

　　lineStyle:{//线条样式

　　　　color: '#48b',
　　　　width: 2,
　　　　type: 'solid'
　　}

},

axisLabel: {//控制x轴上的文字的样式

　　show: true,//显示与否

　　textStyle: { color: '#fff' },//控制x轴字体样式

　　formatter: '{value} °C',//轴上的数据带单位

}
}
]，

四、

鼠标移动到数据上出现线条的样式控制

tooltip : {
　　trigger: 'axis',
　　axisPointer:{
　　　　type: 'line',
　　　　lineStyle: {
　　　　　　color: '#929bb6',
　　　　　　width: 1,
　　　　　　type: 'solid'
　　　　}
　　}
},

鼠标移动到数据上不出现线条出现阴影

tooltip: {
　　show: true,
　　trigger: 'axis',
　　axisPointer:{
　　　　type: 'shadow',
　　　　shadowStyle: {
　　　　　　color: 'rgba(88,101,137,0.3)',
　　　　　　width: '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) + "\n";
}
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]
}
]