用echarts做如图,x轴左右都是正数的倒立柱形图展示

1.建好存放图形的div

<div id="txzsTab" title="图形展示" bodyStyle="padding:0px 10px 0px 20px;" style="padding:0px;overflow:hidden;">
    <div id="lineChart" class="mini-col-6 text-l" style="height: 600px;"></div>
    <div id="lineChart2" class="mini-col-6 text-r" style="height: 600px;"></div>
</div>

2.js方法

<script type="text/javascript">
<!--图表展示-->
//获取ChartSeries数据
function getChartSeries() {
    var data = {};
    var gridData = grid.getData();
    var series = new Array();
    var series2 = new Array();
    var legendData = new Array();
    var legendData2 = new Array();

    legendData.push("调查数据男性人数");
    var serie0 = {};
    serie0.name = "调查数据男性人数";
    serie0.type = "bar";
    serie0.stack = "人数";
    serie0.label={
        normal:{
            show: false,
            formatter: function (value) {
                return Math.abs(value.data); //将负值转回正数
            }
        }
    }
    var serie0_data=new Array();

    legendData.push("调查数据女性人数");
    var serie1 = {};
    serie1.name = "调查数据女性人数";
    serie1.type = "bar";
    serie1.stack = "人数";
    var serie1_data=new Array();

    legendData2.push("年末数据男性人数");
    var serie2 = {};
    serie2.name = "年末数据男性人数";
    serie2.type = "bar";
    serie2.stack = "人数";
    serie2.label={
        normal:{
            show: false,
            formatter: function (value) {
                return Math.abs(value.data); //将负值转回正数
            }
        }
    }
    var serie2_data=new Array();

    legendData2.push("年末数据女性人数");
    var serie3 = {};
    serie3.name = "年末数据女性人数";
    serie3.type = "bar";
    serie3.stack = "人数";
    var serie3_data=new Array();

    serie0_data.push(0);
    serie0_data.push(0);
    serie0_data.push(0);
    serie0_data.push(-(gridData[1].dcnanxsl+gridData[2].dcnanxsl));

    serie1_data.push(0);
    serie1_data.push(0);
    serie1_data.push(0);
    serie1_data.push(gridData[1].dcnvxsl+gridData[2].dcnvxsl);

    serie2_data.push(0);
    serie2_data.push(0);
    serie2_data.push(0);
    serie2_data.push(-(gridData[1].nmnanxsl+gridData[2].nmnanxsl));

    serie3_data.push(0);
    serie3_data.push(0);
    serie3_data.push(0);
    serie3_data.push(gridData[1].nmnvxsl+gridData[2].nmnvxsl);

    for(var i=3;i<gridData.length-2;i++){
        serie0_data.push(-(gridData[i].dcnanxsl))
        serie1_data.push(gridData[i].dcnvxsl);
        serie2_data.push(-(gridData[i].nmnanxsl));
        serie3_data.push(gridData[i].nmnvxsl);
    }

    //把要放到左边的数据先变成负值
    serie0_data.push(-(gridData[gridData.length-2].dcnanxsl+gridData[gridData.length-1].dcnanxsl));
    serie1_data.push(gridData[gridData.length-2].dcnvxsl+gridData[gridData.length-1].dcnvxsl);
    serie2_data.push(-(gridData[gridData.length-2].nmnanxsl+gridData[gridData.length-1].nmnanxsl));
    serie3_data.push(gridData[gridData.length-2].nmnvxsl+gridData[gridData.length-1].nmnvxsl);

    serie0.data=serie0_data;
    series[0] = serie0;

    serie1.data=serie1_data;
    series[1] = serie1;

    serie2.data=serie2_data;
    series2[0] = serie2;

    serie3.data=serie3_data;
    series2[1] = serie3;

    data.series = series;
    data.series2 = series2;
    data.legendData = legendData;
    data.legendData2 = legendData2;
    return data;
}

//切换tab
tabs.on('activechanged',function (e) {
    if (e.index == 1) {
        if(grid.getTotalCount()>1){
            setEcharts(getChartSeries());
            setEcharts2(getChartSeries());
        }else{
            mini.showTips({
                content: "请先进行统计，再查看图表展示",
                state: "warning",
                x: "center",
                y: "center",
                timeout: 3000
            });
            return;
        }

    }
})

//调查数据
function setEcharts(obj) {
    if (obj !=null || obj !=''){

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('lineChart'));
        myChart.clear();

        option = {
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show:true,
                        excludeComponents :['toolbox'],
                        pixelRatio: 2
                    }
                }
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter:function(params){ // 改鼠标悬浮提示值格式
                    var relVal = params[0].name+"<br/>";
                    relVal += params[0].seriesName+ ' : ' + (-params[0].value) +"<br/>";
                    relVal += params[1].seriesName+ ' : ' +params[1].value+"<br/>";
                    return relVal;
                }
            },
            legend: {
                data:obj.legendData
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value',
                    // min:-80,                    //自定义设置x轴最小值
                    // max:80,                  //自定义设置x轴最大值
                    // splitNumber:8,           //自定义设置x轴值间隔数量
                    axisLabel:{
                        formatter:function(value) {
                            return Math.abs(value);   //负数取绝对值变正数
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    data : ['0 to 4','5 to 9','10 to 14','15 to 19','20 to 24','25 to 29','30 to 34','35 t0 39','40 to 44','45 to 49','50 to 54','55 to 59','60 to 64','65 to 69','70 to 74','75 to 79','80 and over ']
                }
            ],
            series : obj.series
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
}

//年末数据
function setEcharts2(obj) {
    if (obj !=null || obj !=''){

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('lineChart2'));
        myChart.clear();

        option = {
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {
                        show:true,
                        excludeComponents :['toolbox'],
                        pixelRatio: 2
                    }
                }
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                formatter:function(params){ // 改鼠标悬浮提示值格式
                    var relVal = params[0].name+"<br/>";
                    relVal += params[0].seriesName+ ' : ' + (-params[0].value) +"<br/>";
                    relVal += params[1].seriesName+ ' : ' +params[1].value+"<br/>";
                    return relVal;
                }
            },
            legend: {
                data:obj.legendData2
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value',
                    // min:-80,                    //自定义设置x轴最小值
                    // max:80,                  //自定义设置x轴最大值
                    // splitNumber:8,           //自定义设置x轴值间隔数量
                    axisLabel:{
                        formatter:function(value) {
                            return Math.abs(value);   //负数取绝对值变正数
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    data : ['0 to 4','5 to 9','10 to 14','15 to 19','20 to 24','25 to 29','30 to 34','35 t0 39','40 to 44','45 to 49','50 to 54','55 to 59','60 to 64','65 to 69','70 to 74','75 to 79','80 and over ']
                }
            ],
            series : obj.series2
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
}

</script>