echarts学习

1.帮助文档

http://echarts.caixin.com/doc/doc.html#DataZoom

2.柱状图

1.设置透明

color: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', '#60C0DD'],

注意'rgba(0,0,0,0)' 带引号

2.X轴和Y轴类型

type: 'value',    //数值

type: 'category',   //字符

柱状图只有一个可以是字符，那么要使得2个都是现实成字符该怎么做呢？

Y轴类型是category,X轴是value,使用formatter的回调函数，进行转换，(Y轴同理，使用\n进行字符位置调整)，注意max:3000是最大X轴长度，如果不设置，那么X轴的刻度可能会变化

xAxis: [{
type: 'value',
splitLine: {
show: true
},
splitNumber: 6,
max: 3000,
axisLabel: {
formatter: function(value) {
if(0 == value) {
return ""
}
if(500 == value) {
return "未创建                              "
}
if(1000 == value) {
return "新注册                               "
}
if(1500 == value) {
return "已发布                              "
}
if(2000 == value) {
return "废弃等待                         "
}
if(2500 == value) {
return "已废弃                               "
}
if(3000 == value) {
return "已删除                                 "
}

return " ";
}
},
}],

3.修改选中高亮的颜色

itemStyle: {
normal: {
label: {
show: false,
position: 'insideRight'
}
},

//高亮,
emphasis: {
color: 'rgba(0,0,0,0)'
}
},

4.dataZoom

5.使用echars

require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
],
function(ec) {
//option写这里
var myChart = ec.init(document.getElementById('apiNumChangeImg'), 'macarons');
myChart.setOption(option);
}
);