echarts折线图

标签：with   ott   gap   tick   var   标题   turn   data   lines   

app.title = ‘多 X 轴示例‘;

var colors = [‘#5793f3‘, ‘#d14a61‘, ‘#675bba‘];

option = {
color: colors,

tooltip: {
trigger: ‘title‘,
axisPointer: {
type: ‘cross‘
}
},
title:{
text:‘雨量图‘,//标题
left:50//离左边50
},
legend: {
data:[‘2016 降水量‘],
bottom:false, //数据标点放在下
center:true//数据标点放在中间
grid: {
top: 60,//离顶端60
bottom: 50//里底部50
},
xAxis: [
{
name : ‘小时‘,//纵坐标标题
type: ‘category‘,//
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1]//设置纵轴颜色
}
},
boundaryGap : false,//横轴右边是否留多余
axisPointer: {
label: {
formatter: function (params) {
return ‘降水量 ‘ + params.value
+ (params.seriesData.length ? ‘：‘ + params.seriesData[0].data : ‘‘);
}
}
},
data: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11","0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"],
axisLable:{
interval:3 ////0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
}
},



],
yAxis: [
{
name : ‘厘米‘,
splitArea : {show : true},//是否根据纵轴区分颜色
type: ‘value‘
}
],
series: [
{
//itemStyle : { normal: {label : {show: true}}},
name:‘2016 降水量‘,
type:‘line‘,
smooth: false,//平缓折线 或者直折线
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7,3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
//symbol:true

}
]
};

app.title = ‘多 X 轴示例‘;

var colors = [‘#5793f3‘, ‘#d14a61‘, ‘#675bba‘];

option = {
color: colors,

tooltip: {
trigger: ‘title‘,
axisPointer: {
type: ‘cross‘
}
},
title:{
text:‘雨量图‘,//标题
left:50//离左边50
},
legend: {
data:[‘2016 降水量‘],
bottom:false, //数据标点放在下
center:true//数据标点放在中间
grid: {
top: 60,//离顶端60
bottom: 50//里底部50
},
xAxis: [
{
name : ‘小时‘,//纵坐标标题
type: ‘category‘,//
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[1]//设置纵轴颜色
}
},
boundaryGap : false,//横轴右边是否留多余
axisPointer: {
label: {
formatter: function (params) {
return ‘降水量 ‘ + params.value
+ (params.seriesData.length ? ‘：‘ + params.seriesData[0].data : ‘‘);
}
}
},
data: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11","0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"],
axisLable:{
interval:3 ////0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
}
},



],
yAxis: [
{
name : ‘厘米‘,
splitArea : {show : true},//是否根据纵轴区分颜色
type: ‘value‘
}
],
series: [
{
//itemStyle : { normal: {label : {show: true}}},
name:‘2016 降水量‘,
type:‘line‘,
smooth: false,//平缓折线 或者直折线
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7,3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
//symbol:true

}
]
};

echarts折线图

标签：with   ott   gap   tick   var   标题   turn   data   lines   

原文地址：http://www.cnblogs.com/lzfsds/p/6986697.html