var mzCapitalChart = echarts.init(document.getElementById('mzCapital'));
var mzCapitalOption = {
tooltip: {
trigger: 'axis',
textStyle: {
fontSize: '12'
}
},
legend: {
data:['收入','支出'],
right:'5%'
},
grid: {
left: '5%',
right: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: ['20%', '20%'], //X轴两边留白
axisLine:{
show:false //轴线
},
axisTick:false, //刻度线
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
},
yAxis: {
type: 'value',
axisLine:{
show:false
},
splitLine:{
show:false //图形区域内的分隔线
},
splitArea:{
show:true,
areaStyle:{
color:['#eaedf1','#fff'] //图形区域内分隔背景色
}
},
axisTick:false
},
color: ['#29b6ff','#61da94'],
series: [
{
name:'收入',
type:'line',
smooth: true,
data:[12000, 13200, 10100, 13400, 9000, 23000, 22000, 18200, 19100, 23400, 29000, 33000]
},
{
name:'支出',
type:'line',
smooth: true,
data:[22000, 18200, 19100, 23400, 29000, 33000, 31000, 10100, 13400, 9000, 23000, 21000]
}
]
};
// 使用刚指定的配置项和数据显示图表
mzCapitalChart.setOption(mzCapitalOption);
折线图
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 先看图 分析图表 首先我们根据上图我们可以看到如下几个元素 边框线 ![5FXGL_@$E{Y)R{}L~1V$]...
- 问题 一个折线图中有多条折线。由于折线之间数值范围相差较大(折线A范围[0-50],折线B范围[10000-200...