• echarts做双柱图


    1、先看效果:

     2、思路:

      是横向柱图沿着Y轴方向有正负数据的效果,所以做出图的关键在于组合series;

    3、上option:

    option = {
        title: {
            "text": `201808`,
                    "left": "center",
                    "top": "5%",
                    "textStyle": {
                        "color": "#333333",
                        "fontFamily": "PingFangSC-Medium",
                        "fontSize": 14,
                        "lineHeight": 16,
                        "rich": {
                                "a": {
                                    "color": '#bebebe',
                                    "fontSize": 12,
                                },
                            }
                    }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器,坐标轴触发有效
                type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        grid: {
            top: 80,
            bottom: 30
        },
        xAxis: {
            type: 'value',
            position: 'top',
            axisLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
        },
        yAxis: {
            type: 'category',
            axisLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
            data: ['ten', 'nine', 'eight', 'seven', 'six', 'five', 'four', 'three', 'two', 'one']
        },
        series: [
            {
                "name": "202008",
                "type": "bar",
                "stack": "202008人数",
                "color": "#FF7D00", 
                "label": {
                    "show": true,
                    "position": [
                        "0%",
                        "30%"
                    ],
                    "color": "#000",
                    "formatter": "233(22%)"
                },
                "data": [
                    26,
                    141,
                    75,
                    282,
                    37,
                    26,
                    141,
                    75,
                    282,
                    37,
                ]
            },
            {
                "name": "202008legend",
                "type": "bar",
                "stack": "202008人数",
                "color": "#FF7D00",
                "label": {
                    "show": false
                },
                "data": [
                    -26,
                    -141,
                    -75,
                    -282,
                    -37,
                    -26,
                    -141,
                    -75,
                    -282,
                    -37,
                ]
            }
        ]
    };
  • 相关阅读:
    properties 插件安装
    FineReport 安装教程
    Red/Black Tree 演示
    java 日期转化
    Tomcat使用Log4j按天生成日志 亲测可行
    服务器初始化
    ubuntu-rc.local
    django-views
    https tcp ssl
    svn
  • 原文地址:https://www.cnblogs.com/art-poet/p/13628261.html
Copyright © 2020-2023  润新知