option = { //可配置选项
title : {
text: '某楼盘销售情况', //标题,每个图表最多仅有一个标题
subtext: '纯属虚构' //副标题文本,'\n'指定换行
},
tooltip : { //提示框,鼠标悬浮交互时的信息提示
trigger: 'axis',
axisPointer:{
//坐标轴指示器,默认type为line,可选为:'line' | 'cross' | 'shadow' | 'none'(无),指定type后对应style生效,见下
//lineStyle设置直线指示器(详见lineStyle),
//crossStyle设置十字准星指示器(详见lineStyle),
//shadowStyle设置阴影指示器(详见areaStyle),areaStyle.size默认为'auto'自动计算,可指定具体宽度
type: 'line',
lineStyle: {
color: 'rgba(255,255,255,.3)',
width: 2,
type: 'solid'
}
}
},
legend: { //图例,每个图表最多仅有一个图例
//可设置itemWidth(图例图形宽度),itemHeight(图例图形高度),textStyle
data:['意向','预购','成交'] //图例内容数组
},
toolbox: { //工具箱自定义功能
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true, //是否启用拖拽重计算特性,默认关闭
xAxis : [//直角坐标系中横轴数组,最多同时存在2条横轴,2条同时存在时默认第一条安放于底部,第二条安放于顶部
{
type : 'category', //'category(默认)' | 'value' | 'time' | 'log'
boundaryGap : false, //类目起始和结束两端空白策略,默认为true留空,false则顶头 **注意不同类型设置格式不同**
splitLine:{ //横向分隔线
show:true,
lineStyle:{
color:'002F4C'
}
},
axisLine:{ //坐标轴线
lineStyle:{
color:'rgba(255,255,255,.3)'
}
},
axisLabel:{
textStyle:{
color:'#fff',
fontSize:18
},
formatter:function(value,index){
if(value%2==0){
return ''
}else{
return value
}
}
},
data : ['1','2','3','4','5','6','7','8','9','10','11','12']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'去年月值',
type:'line',
symbol:'none', //不显示markPoint
smooth:true, //true为平滑曲线
barGap:'7%', //X轴间距
itemStyle: {
normal: {
lineStyle: {
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#ff0000'
},{
offset: 1,
color: '#ff6666'
}]),
width:4,
shadowColor:'rgba(255,255,255,.8)', //阴影色彩
shadowBlur:10, //阴影模糊度
shadowOffsetX:0,
shadowOffsetY:0
}
}
},
data:[10, 12, 21, 54, 260, 830, 710]
},
{
name:'本年月值',
type:'bar', //柱状图
barWidth:'22', //width
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#13bdfa'
},{
offset: 1,
color: '#00263f'
}]),
barBorderRadius:[7,7,0,0] //柱状图圆角
}
},
data:[30, 182, 434, 791, 390, 30, 10]
}
]
};
工具箱自定义功能回调处理,见下图: