echarts怎么使折线图、柱状图、x轴 都在原点开始绘制

狼武者 发布于 2017/03/05 21:00
阅读 3K+
收藏 0

如图1,我想做一个图1 的图表:折线图在原点开始绘制、柱状图在原点开始绘制、x轴的坐标值在刻度下方显示!

但是,图表做出来以后开始是图3这样:折线图不在原点开始绘制,x坐标值也不是在刻度下面,而是在刻度之间!!

通过查api,改变了,两边的留白策略:xAxis--> boundaryGap : false, 如图4,  图表就变成了图3 那副德行!!

大神们,我改怎么才能作出像图1那样的图呢?

小弟代码如下: 

<html>
	<head>
		<script src="echarts.js"></script>
	</head>
	<body>
		<div id="main" style="width:900px;height:500px"></div>
	</body>
</html>
<script>

	 var myChart = echarts.init(document.getElementById('main'));
       // const {timeData,jyData,ljylData} = this.props.RainfallLine;
       var timeData = [
            '2009/6/12 22:00', '2009/6/13', '2009/6/13 02:00', '2009/6/13 04:00', '2009/6/13 06:00', '2009/6/13 08:00', '2009/6/13 10:00', '2009/6/13 12:00', '2009/6/13 14:00'
        ];
        var option = {
            title: {
                text: '雨量过程线(时段)',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                showDelay: 0
            },
            legend: {
                //y : -30,
                data:['累计雨量','降雨'],
                x: 'left'
            },
            toolbox: {
                right:'20',
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}

                }
            },
            grid:{	//设置图标上面和下面的距离
                left: 50,
                right: 50,
                y:60
            },
            xAxis : [
                {
                    type : 'category',
                    nameLocation:'middle',	 //坐标轴名称 位置
                    boundaryGap : false,
                    axisLine: {onZero: true},
                    data: timeData,
                    position:'end'//设置刻度线 是在上面 还是下面
                },
            ],
            yAxis : [

                {
                    name : '降雨(mm)',
                    type : 'value',
                    nameLocation:'middle',	 //坐标轴名称 位置
                    nameGap:35,//坐标轴名称与轴线之间的距离
                    nameTextStyle:{//坐标名称颜色 默认取axisLine.lineStyle.color
                        //color:'#FF0000'
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#0505BF'
                        }
                    },
                    max : 25
                },
                {
                    name : '累计雨量(mm)',
                    type : 'value',
                    nameLocation:'middle',	 //坐标轴名称 位置
                    nameGap:35,//坐标轴名称与轴线之间的距离
                    nameTextStyle:{//坐标名称颜色 默认取axisLine.lineStyle.color
                        //color:'#FF0000'
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#0505BF'
                        }
                    },
                    max : 50
                }
            ],
            series : [
                {
                    name:'累计雨量',
                    type:'line',
                    smooth:true, //线平滑显示
                    yAxisIndex: 1,//根据第二个y轴画线
                    symbolSize: 8,	//设置拐点 圆圈的大小
                    hoverAnimation: true,//是否开启 hover 在拐点标志上的提示动画效果。
                    data:[1,2,3,4,5,6,7,8,9]
                },
                {
                    name:'降雨',
                    type:'bar',
                    smooth:true, //线平滑显示
                    symbolSize: 8,	//设置拐点 圆圈的大小
                    hoverAnimation: true,//是否开启 hover 在拐点标志上的提示动画效果。
                    data:[9.1,2.2,13,5.4,1.5,3.6,8.7,8.8,7.9],
                    barCategoryGap:'0%'//,//类目间柱形距离,默认为类目间距的20%,可设固定值
                }

            ],
            color:['#7CB5EC','#4572A7']

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>

 

加载中
0
o
ooooevan

同问,楼主解决了吗?

狼武者
没有啊!发了github上面都没人鸟我
0
ck114
ck114

同问啊,楼主,看来这个问题还是很关键的,有答案吗?

返回顶部
顶部