echart 正负图

<script>

$(function() {

        // 基于准备好的dom，初始化echarts实例

       var myChart = echarts.init(document.getElementById('main'));

       // 指定图表的配置项和数据

option = {
                    title: [
                        {
                            text: '正负条形图',
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: 'blue',
                                //fontSize: '14',
                            },
                        }, 
                        {
                            text: '实验室',
                            //borderColor: '#999',
                            //borderWidth: 1,
                            textStyle: {
                                fontSize: 14
                            },
                            left: 'center',
                            top: '88%'
                        },
                    ],
                    tooltip: {
                        trigger: 'axis',//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' |'cross'
                        }
                    },
                    legend: {
                        data: ['利润', '支出', '收入'],
                        //bottom: '0',
                    },
                    grid: {
                        left: '10%',
                        right: '10%',
                        bottom: '15%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: { //坐标轴刻度相关设置。
                            show: false,
                        },
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
//                        axisLine: {
//                            //show: true, //是否显示坐标轴轴线。
//                            //onZero:false,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
//                            //symbol:'arrow', //轴线两边的箭头
                            lineStyle: {
                                width: 2,
                                color: 'green',
                            },
//                        },
 
                    }],
                    yAxis: [{
                        type: 'value',
                        name: 'Z值',
                        nameLocation: 'center',
                        nameGap: 40
                    }],
                    series: [
                        {
                            name: '利润',
                            type: 'bar',
                            label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                                normal: { //正常情况
                                    show: true, //是否显示标签
                                    position: 'inside', //标签的位置。
                                    distance: 5, //距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。default: 5
                                    rotate: 0, //标签旋转。从 -90 度到 90 度。正值是逆时针。
                                    
                                }
                            },
                            data: [200, 170, 240, 244, 200, 220, 210]
                        },
                        {
                            name: '收入',
                            type: 'line',
                            stack: '总量', //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
                            label: {
                                normal: {
                                    show: true, //是否显示标签
                                    position: 'inside', //标签的位置。
                                }
                            },
                            data: [320, 302, 342, 374, 390, 450, 420]
                        },
                        {
                            name: '支出',
                            type: 'bar',
                            stack: '总量', 
                            label: {
                                normal: {//正常情况
                                    show: true, //是否显示标签
                                    position: 'inside'
                                }
                            },
                            data: [-120, -132, -102, -134, -190, -230, -210]
                        }
                    ]
                };
 
                //myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
                
 
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

});

</script>

 

效果如下：