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

狼武者 发布于 2017/03/05 21:00
阅读 6K+
收藏 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

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

0
米然风
米然风

楼主解决了吗

0
l
leewen5

要的是这样的效果嘛?

0
l
leewen5
option = {
    title: {
        text: '动态数据',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#283b56'
            }
        }
    },
    legend: {
        data:['最新成交价', '预购队列']
    },
    toolbox: {
        show: true,
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    dataZoom: {
        show: false,
        start: 0,
        end: 100
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: true,
            boundaryGap: false,
            data: [1,2,3,4,5,6,7,8,9,10]
        },
        {
            type: 'category',
            boundaryGap: true,
            data: [11,12,13,14,15,16,17,18,19,20]
        }
    ],
    yAxis: [
        {
            type: 'value',
            scale: true,
            name: '价格',
            max: 30,
            min: 0,
            boundaryGap: [0, 0]
        },
        {
            type: 'value',
            scale: true,
            name: '预购量',
            max: 1200,
            min: 0,
            boundaryGap: [0, 0]
        }
    ],
    series: [
        {
            name:'预购队列',
            type:'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [100,200,300,400,500,600,700,800,900,1000]
        },
        {
            name:'最新成交价',
            type:'line',
            data: [0,12,13,14,15,16,17,18,19,20]
        }
    ]
};

 

返回顶部
顶部