SmartBi各类图形及其echarts的js代码

最新推荐文章于 2024-06-26 11:09:42 发布
最新推荐文章于 2024-06-26 11:09:42 发布
阅读量1.1k 收藏 11
点赞数 3
分类专栏： BI分析 BI JS 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuzhiqiang66/article/details/118330710
版权
BI分析 同时被 3 个专栏收录
17 篇文章 9 订阅
订阅专栏
BI
11 篇文章 2 订阅
订阅专栏
JS
1 篇文章 0 订阅
订阅专栏

SmartBi各类图形及其echarts的js代码

一：柱图

1：普通柱图

在这里插入图片描述

{
    "color": ["#62a9ff"],
    "grid": {
        "left": "46px",
        "bottom": "66px",
        "right": "16px",
        "top": "46px"
    },
    //柱子宽度设置
    "barMaxWidth": "16px",
    "xAxis": {
        "axisPointer": {
            "show": "true",
            "type": "shadow",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "nameTextStyle": {
                "color": "#bfbfbf"
            },
            "label": {
                "color": "#898989"
            }
        },
        //名字设置
        "name": "",
        //坐标轴设置
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        //坐标轴标签设置
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "rotate": "45", //设置角度
            "color": "#bfbfbf",
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    "yAxis": {
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "color": "#bfbfbf",
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    "series": [{
        "type": "bar",
        //设置柱子宽度
        "barWidth": "16px",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [8, 8, 0, 0]
            }
        },
        //设置显示最大值和最小值标签
        "markPoint": {
            "data": [{
                "type": "max",
                "name": "最大值"
            }, {
                "type": "min",
                "name": "最小值"
            }]
        }
    }]
}
2：分组柱图

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed"],
    "grid": {
        "left": "46px",
        "bottom": "66px",
        "right": "16px",
        "top": "46px"
    },
    "barMaxWidth": "16px",
    "xAxis": {
        "name": "",
        "axisPointer": {
            "show": "true",
            "type": "shadow",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "nameTextStyle": {
                "color": "#bfbfbf"
            },
            "label": {
                "color": "#898989"
            }
        },
        "name": "",
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "rotate": "45",
            "color": "#bfbfbf",
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"

        }
    },
    "yAxis": {
        "name": "万",
        "nameTextStyle": {
            "color": "#bfbfbf",
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "color": "#bfbfbf",
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    "legend": {
        "show": "ture", //图例显示
        "orient": "horizontal", //图例布局朝向，vertical竖向排版，horizontal横向
        "align": "left", //图例对齐方式
        "right": "16px", //图例距右侧距离
        "top": "8px", //图例距顶部距离
        //"icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12px",
            "lineHeight": "20px"
        } //图例文字样式
    },
    "series": [{
        "type": "bar",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [8, 8, 0, 0]
            }
        }
    }, {
        "type": "bar",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [8, 8, 0, 0]
            }
        },
        "barGap": "0%" //设置柱子之间的距离
    }]
}
3：堆叠柱图

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
    //设置内容边距
    "grid": {
        "left": "46px",
        "bottom": "80px",
        "right": "16px",
        "top": "46px"
    },
    "xAxis": {
        "name": "",
        "axisPointer": {
            "show": "true",
            "type": "shadow",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#898989"
            }
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "rotate": "45", // 字体的角度
            "textStyle": {
                "color": "#bfbfbf"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    "yAxis": {
        "name": "万",
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#bfbfbf"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }

    },
    //设置柱子宽度
    "barMaxWidth": "16px",
    "legend": {
        "show": "ture", //图例显示
        "orient": "horizontal", //图例布局朝向，vertical竖向排版，horizontal横向
        "align": "left", //图例对齐方式
        "right": "16px", //图例距右侧距离
        "top": "8px", //图例距顶部距离
        //"icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12px",
            "lineHeight": "20px"
        } //图例文字样式
    },
    "series": [{
            "stack": "check", // 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放
            "itemStyle": {
                "normal": {
                    "barBorderRadius": [0, 0, 0, 0]
                }
            }
        }, {
            "stack": "check", // 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
            "itemStyle": {
                "normal": {
                    "barBorderRadius": [8, 8, 0, 0]
                }
            }
        }]
        /*"dataZoom": {
            "type": "slider"
        }*/
}
4：一般条形柱图

在这里插入图片描述
在这里插入图片描述

{
    "color": ["#62a9ff" /*, "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"*/ ], //循环用色
    "grid": {
        "left": "90px",
        "bottom": "16px",
        "right": "96px",
        "top": "16px"
    },
    "xAxis": {
        "show": false,
        "axisLine": {
            "lineStyle": {
                "color": "#ffffff"
            }
        },
        "axisLabel": {
            "show": false
        }

    },
    "yAxis": {
        "name": "",
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisPointer": {
            "show": "true",
            "type": "shadow",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#bfbfbf"
            }
        },
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#424e67"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    "barMaxWidth": "16px",
    "label": {
        "show": "true",
        "position": "right"
    },
    //此处的label删除后，则每个柱子后面的数据可以隐藏
    "series": [{
        "itemStyle": {
            "normal": {
                "barBorderRadius": [0, 8, 8, 0]
            },
            "tooltip": {
                "show": "true",
                //设置字体系列:温软雅黑
                "fontfamily": "Microsoft YaHei",
                //设置字体大小
                "fontsize": "12px"
            }
        }
    }],
    "dataZoom": {
        "show": "true",
        "type": "inside",
        "orient": "vertical",
        //"start": "100", //“10”表示百分比
        //"end": "0" //“80”表示百分比
    }
    //dataZoom主要设置显示在条形图右侧的数据区域缩放条，可以全部去掉
}

在这里插入图片描述
在这里插入图片描述

{
    "color": ["#62a9ff" /*, "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"*/ ], //循环用色
    "grid": {
        "left": "90px",
        "bottom": "16px",
        "right": "96px",
        "top": "16px"
    },
    "xAxis": {
        "show": false,
        "axisLine": {
            "lineStyle": {
                "color": "#ffffff"
            }
        },
        "axisLabel": {
            "show": false
        }

    },

    "yAxis": {
        "name": "",
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisPointer": {
            "show": "true",
            "type": "shadow",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#bfbfbf"
            }
        },

        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#424e67"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    "barMaxWidth": "16px",
    "label": {
        "show": "true",
        "position": "right"
    },
    // "series": [{
    //     "itemStyle": {
    //         "normal": {
    //             "barBorderRadius": [0, 8, 8, 0]
    //         },
    //         "tooltip": {
    //             "show": "true",
    //             //设置字体系列:温软雅黑
    //             "fontfamily": "Microsoft YaHei",
    //             //设置字体大小
    //             "fontsize": "12px"
    //         }
    //     }
    // }],

    // "tooltip": {
    //     // "formatter": "function(a){ debugger;return a.seriesName+'</br>'+a.name+'</br>'+a.data.value[0]+'万元'}"

    //     "formatter": "function(a){ debugger;return a.name+'</br>'+a.data.value[0]+'万元'}"

    // },

    "series": [{

        "type": "bar",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [0, 8, 8, 0],
                "color": "#62a9ff",
                "label": {
                    "show": true,
                    "textStyle": {
                        "color": "#62a9ff"
                    },
                    "formatter": "function(a){ debugger;return a.data.value[0]+'万元'}", //d后面加单位
                    "position": "right" //设置居上
                }
            }
        },
        "tooltip": {
            // "formatter": "function(a){ debugger;return a.seriesName+'</br>'+a.name+'</br>'+a.data.value[0]+'万元'}"

            "formatter": "function(a){ debugger;return a.name+'</br>'+a.data.value[0]+'万元'}"

        }
    }],
    //此处对series的更改可以让他的柱子显示万元这个单位。




    "dataZoom": {
        "show": "true",
        "type": "inside",
        "orient": "vertical"
            //"start": "100", //“10”表示百分比
            //"end": "0" //“80”表示百分比

    }
}
5：分组条形柱图

图例位置直接在设置处勾选即可。

在这里插入图片描述

{
    "color": ["#62a9ff" /*, "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"*/ ], //循环用色
    "grid": {
        "left": "90px",
        "bottom": "16px",
        "right": "50px",
        "top": "16px"
    },
    "xAxis": {
        "show": false,
        "axisLine": {
            "lineStyle": {
                "color": "#ffffff"
            }
        },
        "axisLabel": {
            "show": false
        }

    },
    "yAxis": {
        "name": "",
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisPointer": {
            "show": "true",
            "type": "shadow",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#bfbfbf"
            }
        },
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#424e67"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    "barMaxWidth": "16px",
    /*"label": {
        "show": "true",
        //"formatter": "{c}S万",
        "position": "right"
    },*/
    "series": [{
        "type": "bar",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [0, 8, 8, 0]
            }
        }
    }, {
        "type": "bar",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [0, 8, 8, 0]
            }
        },
        "barGap": "0%" //设置柱子之间的距离
    }],
    "dataZoom": {
        "show": "true",
        "type": "inside",
        "orient": "vertical",
        //"start": "100", //“10”表示百分比
        //"end": "0" //“80”表示百分比

    }
}
6：堆叠条形柱图

图例位置直接在设置处勾选即可。

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed" /*, "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"*/ ], //循环用色
    "grid": {
        "left": "90px",
        "bottom": "16px",
        "right": "96px",
        "top": "16px"
    },
    "xAxis": {
        "axisLine": {
            "lineStyle": {
                "color": "#ffffff"
            }
        },
        "axisLabel": {
            "show": false
        }

    },
    "yAxis": {
        "name": "",
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisPointer": {
            "show": "true",
            "type": "shadow",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#bfbfbf"
            }
        },
        "axisLabel": {
            //设置轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#bfbfbf"
            }
        }
    },
    //"barWidth": "16px",
    "barMaxWidth": "16px",
    "series": [{
        "stack": "check", // 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放
        "itemStyle": {
            "normal": {
                "barBorderRadius": [0, 0, 0, 0]
            }
        }
    }, {
        "stack": "check", // 数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
        "itemStyle": {
            "normal": {
                "barBorderRadius": [0, 8, 8, 0]
            }
        }
    }],
    //"dataZoom": {
    //    "show": "true",
    //    "type": "slider",
    //    "orient": "vertical",
    //    "start": "100", //“10”表示百分比
    //    "end": "20" //“80”表示百分比
    //}
}
7：双向条形柱图

注意：创建数据集时需要将男士人数设置为负数。

在这里插入图片描述
在这里插入图片描述

{
    "grid": {
        "top": "56px",
        "bottom": "48px",
        "left": "72px",
        "right": "72px"
    },
    "color": ["#62a9ff", "#fb7293"], //循环用色
    "legend": {
        "show": "true",
        "left": "center",
        "top": "16px",
        "orient": "horizontal",
        "align": "left"
    },
    "xAxis": [{
        "name": "",
        "type": "value",
        "axisLabel": {
            "formatter": "function(data) {return (Math.abs(data));}"
        }
    }],
    "yAxis": {
        "name": "",
        "type": "category",
        "axisLabel": {
            "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
        },
    },
    "series": [{
        "type": "bar",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [8, 0, 0, 8]
            }
        }
    }, {
        "type": "bar",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [0, 8, 8, 0]
            }
        },
        "barGap": "-100%" //设置柱子之间的距离,实现柱子合并效果
    }],
    //横向条状宽度
    "barWidth": "16px",
    // X坐标条负值转正值
    "tooltip": {
        "trigger": "axis",
        "axisPointer": { // 坐标轴指示器，坐标轴触发有效
            "type": "" // 默认为直线，可选为：'line' | 'shadow'
        },
        "formatter": "function(params) { return params[0].seriesName + ' : ' + Math.abs(params[0].value[0]);}"
    },
    // X坐标刻度负值转正值
}
8：极坐标柱图

普通柱图通过echarts的js代码变化而得，绘图时，选择得是普通柱图，加上下面js代码即可。

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9"], //循环用色
    //不显示y轴
    "yAxis": {
        "show": false
    },
    //不显示x轴
    "xAxis": {
        "show": false
    },
    "radiusAxis": {
        //"data": [],
        "data": ['死亡', '其他', '未愈', '好转', '治愈'],
        // 不显示上面的横线，极坐标系的径向轴
        // "axisLine": {
        // "show": false
        // },
        "axisLabel": {
            "interval": 0,
            "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9"],
            "fontSize": 12,

        }
    },
    //显示极坐标系的角度轴
    "angleAxis": {
        "show": true
    },
    "series": [{
        //类型为柱图
        "type": "bar",
        "barWidth": "10px",
        roundCap: true,
        "itemStyle": {
            "normal": {
                "barBorderRadius": [5, 5, 5, 5]
            }
        },
        //转换为极坐标
        "coordinateSystem": "polar"
    }],
    "polar": {},
}

二：折线图

1：单条折线图

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
    //设置内容边距
    "grid": {
        "left": "46px",
        "bottom": "66px",
        "right": "16px",
        "top": "46px"
    },
    "xAxis": {
        //设置坐标轴名称
        "name": "",
        //设置坐标轴
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        //坐标轴标签设置
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            //"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#bfbfbf"
            },
            "rotate": "45", //设置角度
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        },
        "axisPointer": {
            "show": "true",
            "type": "line",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#898989"
            }
        }
    },
    "yAxis": {
        "name": "人",
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#bfbfbf"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    //"toolbox": {},
    /*"legend": {
        "show": "ture", //图例显示
        "orient": "horizontal", //图例布局朝向，vertical竖向排版，horizontal横向
        "align": "left", //图例对齐方式
        "right": "16px", //图例距右侧距离
        "top": "8px", //图例距顶部距离
        //"icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12px",
            "lineHeight": "20px"
        } //图例文字样式
    },*/
    "series": [{
        "type": "line",
        "smooth": "true"
    }, {
        "type": "line",
        "smooth": "true"
    }, {
        "type": "line",
        "smooth": "true"
    }]
}
2：多条折线图

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
    //设置内容边距
    "grid": {
        "left": "46px",
        "bottom": "66px",
        "right": "16px",
        "top": "46px"
    },
    "xAxis": {
        //设置坐标轴名称
        "name": "",
        //设置坐标轴
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        //坐标轴标签设置
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            //"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#bfbfbf"
            },
            "rotate": "45", //设置角度
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        },
        "axisPointer": {
            "show": "true",
            "type": "line",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#898989"
            }
        }
    },
    "yAxis": {
        "name": "人",
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#bfbfbf"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    //"toolbox": {},
    "legend": {
        "show": "ture", //图例显示
        "orient": "horizontal", //图例布局朝向，vertical竖向排版，horizontal横向
        "align": "left", //图例对齐方式
        "right": "16px", //图例距右侧距离
        "top": "8px", //图例距顶部距离
        //"icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12px",
            "lineHeight": "20px"
        } //图例文字样式
    },
    "series": [{
        "type": "line",
        "smooth": "true"
    }, {
        "type": "line",
        "smooth": "true"
    }, {
        "type": "line",
        "smooth": "true"
    }]
}
3：堆叠折线图

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
    //设置内容边距
    "grid": {
        "left": "46px",
        "bottom": "66px",
        "right": "16px",
        "top": "46px"
    },
    "xAxis": {
        //设置坐标轴名称
        "name": "",
        //设置坐标轴
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        //坐标轴标签设置
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            //"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#bfbfbf"
            },
            "rotate": "45", //设置角度
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        },
        "axisPointer": {
            "show": "true",
            "type": "line",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#898989"
            }
        }
    },
    "yAxis": {
        "name": "人",
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#bfbfbf"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    //"toolbox": {},
    "legend": {
        "show": "ture", //图例显示
        "orient": "horizontal", //图例布局朝向，vertical竖向排版，horizontal横向
        "align": "left", //图例对齐方式
        "right": "16px", //图例距右侧距离
        "top": "8px", //图例距顶部距离
        //"icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12px",
            "lineHeight": "20px"
        } //图例文字样式
    },
    "series": [{
        "type": "line",
        "smooth": "true"
    }, {
        "type": "line",
        "smooth": "true"
    }, {
        "type": "line",
        "smooth": "true"
    }]
}
4：面积折线图

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
    //设置内容边距
    "grid": {
        "left": "46px",
        "bottom": "66px",
        "right": "16px",
        "top": "46px"
    },
    "xAxis": {
        //设置坐标轴名称
        "name": "",
        //设置坐标轴
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        //坐标轴标签设置
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            //"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#bfbfbf"
            },
            "rotate": "45", //设置角度
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        },
        "axisPointer": {
            "show": "true",
            "type": "line",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#898989"
            }
        }
    },
    "yAxis": {
        "name": "人",
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "textStyle": {
                "color": "#bfbfbf"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }
    },
    //"toolbox": {},
    "legend": {
        "show": "ture", //图例显示
        "orient": "horizontal", //图例布局朝向，vertical竖向排版，horizontal横向
        "align": "left", //图例对齐方式
        "right": "16px", //图例距右侧距离
        "top": "8px", //图例距顶部距离
        //"icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12px",
            "lineHeight": "20px"
        } //图例文字样式
    },
    "series": [{
        "type": "line",
        "smooth": "true"
    }, {
        "type": "line",
        "smooth": "true"
    }, {
        "type": "line",
        "smooth": "true"
    }]
}
5：折线图与普通柱图组合

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
    //内容距离设置
    "grid": {
        "left": "60px",
        "bottom": "64px",
        "right": "46px",
        "top": "40px"
    },
    "legend": {
        "show": "ture", //图例显示
        "orient": "horizontal", //图例布局朝向，vertical竖向排版，horizontal横向
        "align": "left", //图例对齐方式
        "right": "center", //图例距右侧距离
        "top": "8px", //图例距顶部距离
        //"icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12px",
            "lineHeight": "20px"
        } //图例文字样式
    },
    "xAxis": {
        "name": "",
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#bfbfbf"
            },
            "rotate": "45", //设置角度
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        },
        "axisPointer": {
            "show": "true",
            "type": "shadow",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#898989"
            }
        }
    },
    "yAxisleft": {
        "name": "人",
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "color": "#bfbfbf"
        },
        //设置字体系列:温软雅黑
        "fontfamily": "Microsoft YaHei",
        //设置字体大小
        "fontsize": "12px",
            
        "type": 'value',
        //获取最小值并实现向上取整
        "min": '0',
        //获取最大值并实现向下取整
        "max": 'function(value){ return Math.ceil(value.max); }',
        "splitNumber": 5
        //将Y轴分成5段
    },
    "yAxisright": {
        "name": "%",
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "color": "#bfbfbf"
        },
        //设置字体系列:温软雅黑
        "fontfamily": "Microsoft YaHei",
        //设置字体大小
        "fontsize": "12px",
        "type": 'value',

        //获取最小值并实现向上取整
        "min": '0',

        //获取最大值并实现向下取整
        "max": 'function(value){ return Math.ceil(value.max); }',
        "splitNumber": 5
    },
    "barMaxWidth": "16",
    "series": [{
        "type": "bar",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [8, 8, 0, 0]
            }
        }
    }, {
        "type": "line",
        "smooth": "true"
    }, {
        "type": "line",
        "smooth": "true"
    }]
}
6：折线图与双向柱图组合

创建数据集时，诊中人次为负数。
在这里插入图片描述

{
    "tooltip": {
        //"trigger": 'axis',
        //"formatter": "{b0}<br />{a0}: {c0}<br />{a1}:{c1}<br />{a2}:{c2}"
        "trigger": 'item',
        "formatter": "function(params){return  params.seriesName+': '+Math.abs(params.value[1])}" //鼠标提示数据标签
    },

    "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3"], //循环用色
    "grid": {
        "left": "60px",
        "bottom": "64px",
        "right": "46px",
        "top": "40px"
    },
    "legend": {
        "show": "ture", //图例显示
        "orient": "horizontal", //图例布局朝向，vertical竖向排版，horizontal横向
        "align": "left", //图例对齐方式
        "right": "center", //图例距右侧距离
        "top": "8px", //图例距顶部距离
        "icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12px",
            "lineHeight": "20px"
        } //图例文字样式
    },
    //"tooltip": {
    //"trigger": "item",
    // "formatter": "function (data) {return (Math.abs(data))}"
    //},
    "xAxis": {
        "name": "",
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            //"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#bfbfbf"
            },
            "rotate": "45"
        },
        "axisPointer": {
            "show": "true",
            "type": "shadow",
            "shadowStyle": {
                "color": "rgba(0, 138, 255, 0.05)"
            },
            "label": {
                "color": "#898989"
            }
        }
    },
    "yAxis": [{
        "name": "人",
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "color": "#bfbfbf",
            //负坐标轴显示正数与正坐标轴对称
            "formatter": "function (data) {return (Math.abs(data))}"
        }
    }, {
        "nameTextStyle": {
            "color": "#bfbfbf"
        },
        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            }
        },
        "axisLabel": {
            "color": "#bfbfbf"
        },
        "tooltip": {
            "trigger": "item",
            "formatter": "{a} <br/>{b} : -{c} 人 "
        }
    }],
    "barWidth": "16",
    "series": [{
        "type": "bar",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [8, 8, 0, 0]
            }
        }
    }, {
        "type": "bar",
        "itemStyle": {
            "normal": {
                "barBorderRadius": [0, 0, 8, 8]
            }
        },
        "barGap": "-100%" //设置柱子之间的距离,实现柱子合并效果
    }, {
        "type": "line",
        "smooth": "true"
    }]
}

三：饼图

1：图例在右侧的一般饼图

在这里插入图片描述

{
    "legend": {
        "show": "ture", //图例显示
        "orient": "vertical", //图例布局朝向，vertical竖向排版
        "align": "left", //图例对齐方式
        "right": "16px", //图例距右侧距离16像素
        "top": "center", //图例距顶部上下居中
        "icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12",
            "lineHeight": "20"
        }, //图例文字样式
            
        //"type": "scroll",让图例可以滚动翻页
        
        "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
        "tooltip": {
            "show": "true"
        }
    },
        
    "tooltip": {
        "trigger": "item",
        "formatter": "{a} <br/>{b} : {c} 人 ({d}%)",
        //设置字体系列:温软雅黑
        "fontfamily": "Microsoft YaHei",
        //设置字体大小
        "fontsize": "12px"
    },
    //设置饼图鼠标移到到某个类别块，那个块会变大且显示相应的数字及占比
        
    "color": [
        "#62a9ff",
        "#c098ed",
        "#eebc23",
        "#c3e14c",
        "#53cee9",
        "#8378ea",
        "#67e0e3",
        "#9fe6b8",
        "#ffdb5c",
        "#ff9f7f",
        "#fb7293",
        "#e062ae",
        "#e690d1",
        "#e7bcf3"
    ],
    "grid": {
        "left": 80,
        "right": 80,
        "top": 16,
        "bottom": 18
    },
    "series": [{
        "radius": ["0%", "50%"],
        //设置饼图的半径，控制饼图大小，若前面不等于0则会变成环饼图
        "center": [
            "40%",
            "50%"
        ],
        
        "label": {
            "normal": {
                "show": "true",
                "position": "outside",
                "formatter": "{b} :\n {c} 人 ({d}%)",
                //"formatter": "{d}%",替换上面那句则引用的标柱之有占比的百分数形式
                //设置字体系列:温软雅黑
                "fontfamily": "Microsoft YaHei",
                //设置字体大小
                "fontsize": "12px"
            }
        },
        //这里的label用于设置箭头引出的标柱，注释label则不会有引出的标柱
        
        "labelLine": {
            "normal": {
                "show": "true"
            }
        }
    }],
    "roseType": ""
}
2：图例在下方的一般饼图

在这里插入图片描述

{
    "legend": {
        "show": "ture", //图例显示
        "orient": "horizontal", //图例布局朝向，vertical竖向排版
        "align": "left", //图例对齐方式
        "left": "center", //图例距右侧距离16像素
        "bottom": "1px", //图例距顶部上下居中
        "icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12",
            "lineHeight": "20"
        }, //图例文字样式
            
        "type": "scroll",
        //功能：图例滚动翻页
            
        "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
        "tooltip": {
            "show": "true"
        }
    },
    "tooltip": {
        "trigger": "item",
        "formatter": "{a} <br/>{b} : {c} 人 ({d}%)",
        //设置字体系列:温软雅黑
        "fontfamily": "Microsoft YaHei",
        //设置字体大小
        "fontsize": "12px"
    },
    "color": [
        "#62a9ff",
        "#c098ed",
        "#eebc23",
        "#c3e14c",
        "#53cee9",
        "#8378ea",
        "#9fe6b8",
        "#ffdb5c",
        "#ff9f7f",
        "#fb7293",
        "#e062ae",
        "#e690d1",
        "#e7bcf3"
    ],
    "grid": {
        "left": 80,
        "right": 80,
        "top": 16,
        "bottom": 18
    },
    "series": [{
        "center": [
            "50%",
            "50%"
        ],
        //控制大小
        "radius": ["0%", "60%"],
        "label": {
            "normal": {
                "show": "true",
                "position": "outside",
                "formatter": "{d}%",
                //设置字体系列:温软雅黑
                "fontfamily": "Microsoft YaHei",
                //设置字体大小
                "fontsize": "12px"
            }
        },
        //控制引出标柱

        "labelLine": {
            "normal": {
                "show": "true"
            }
        }
    }],
    "roseType": ""
}
3：环饼图

在这里插入图片描述

{
    "legend": {
        "show": "ture", //图例显示
        "orient": "vertical", //图例布局朝向，vertical竖向排版
        "align": "left", //图例对齐方式
        "right": "16px", //图例距右侧距离16像素
        "top": "center", //图例距顶部上下居中
        "icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12",
            "lineHeight": "20"
        }, //图例文字样式
        "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
        "tooltip": {
            "show": "true"
        }
    },
        
    "tooltip": {
        "trigger": "item",
        "formatter": "{a} <br/>{b} : {c} 人 ({d}%)",
        //设置字体系列:温软雅黑
        "fontfamily": "Microsoft YaHei",
        //设置字体大小
        "fontsize": "12px"
    },
    //设置饼图鼠标移到到某个类别块，那个块会变大且显示相应的数字及占比 
        
    "color": [
        "#62a9ff",
        "#c098ed",
        "#eebc23",
        "#c3e14c",
        "#53cee9",
        "#8378ea",
        "#67e0e3",
        "#9fe6b8",
        "#ffdb5c",
        "#ff9f7f",
        "#fb7293",
        "#e062ae",
        "#e690d1",
        "#e7bcf3"
    ],
    "grid": {
        "left": 80,
        "right": 80,
        "top": 16,
        "bottom": 18
    },
    "series": [{
        "center": [
            "40%",
            "50%"
        ],
        "radius": ['50%', '70%'],
        //设置饼图的半径，控制饼图大小，前面的数字控制内环半径，后面那个数字控制外环半径
        
        "label": {
            "normal": {
                "show": "true",
                "position": "outside",
                "formatter": "{b} :\n {c} 人 ({d}%)",
                //设置字体系列:温软雅黑
                "fontfamily": "Microsoft YaHei",
                //设置字体大小
                "fontsize": "12px"
            }
        },
         //这里的label用于设置箭头引出的标柱，注释label则不会有引出的标柱
        
        "labelLine": {
            "normal": {
                "show": "true"
            }
        }
    }],
    "roseType": ""
}
4：南丁格尔玫瑰图

在这里插入图片描述

{
    "legend": {
        "show": "ture", //图例显示
        "orient": "vertical", //图例布局朝向，vertical竖向排版
        "align": "left", //图例对齐方式
        "right": "16px", //图例距右侧距离16像素
        "top": "center", //图例距顶部上下居中
        "icon": "circle", //图例图标圆形
        "textStyle": {
            "color": "#424e67",
            "fontStyle": "normal",
            "fontWight": "normal",
            "fontFamily": "微软雅黑",
            "fontSize": "12",
            "lineHeight": "20"
        }, //图例文字样式
        "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
        "tooltip": {
            "show": "true"
        }
    },
    "tooltip": {
        "trigger": "item",
        "formatter": "{a} <br/>{b} : {c} 人 ({d}%)",
        //设置字体系列:温软雅黑
        "fontfamily": "Microsoft YaHei",
        //设置字体大小
        "fontsize": "12px"
    },
    "color": [
        "#62a9ff",
        "#c098ed",
        "#eebc23",
        "#c3e14c",
        "#53cee9",
        "#8378ea",
        "#67e0e3",
        "#9fe6b8",
        "#ffdb5c",
        "#ff9f7f",
        "#fb7293",
        "#e062ae",
        "#e690d1",
        "#e7bcf3"
    ],
    "grid": {
        "left": 80,
        "right": 80,
        "top": 16,
        "bottom": 18
    },
    "series": [{
        "center": [
            "40%",
            "50%"
        ],
        //"radius": ['50%', '70%'],
        "label": {
            "normal": {
                "show": "true",
                "position": "outside",
                "formatter": "{b} :\n {c} 人 ({d}%)",
                //设置字体系列:温软雅黑
                "fontfamily": "Microsoft YaHei",
                //设置字体大小
                "fontsize": "12px"
            }
        },
        "labelLine": {
            "normal": {
                "show": "true"
            }
        }
    }],
    "roseType": ""
}

四：雷达图

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3", "#8378ea"], //循环用色
    "legend": [{
        "orient": "vertical",
        "show": "true",
        "align": "left",
        "top": "center",
        "right": "32px",
        "icon": "circle", //图例图标圆形
        //设置字体系列:温软雅黑
        "fontfamily": "Microsoft YaHei",
        //设置字体大小
        "fontsize": "12px",
        "textStyle": {
            "color": "#424e67"
        }
    }],
    "tooltip": {
        "trigger": "item",
        "color": "#bfbfbf",
        //设置字体系列:温软雅黑
        "fontfamily": "Microsoft YaHei",
        //设置字体大小
        "fontsize": "12px"
    },
    "grid": {
        "left": 16,
        "right": 20,
        "top": 16,
        "bottom": 18
    },
    "center": ["40%", "50%"],
    "name": {
        "show": "true",
        "color": "#424e67",
        "fontSize": "12px"
    }
}

五：散点图

在这里插入图片描述

{
    "color": ["#62a9ff", "#c098ed", "#eebc23", "#c3e14c", "#53cee9", "#8378ea", "#67e0e3", "#9fe6b8", "#ffdb5c", "#ff9f7f", "#fb7293", "#e062ae", "#e690d1", "#e7bcf3", "#8378ea"], //循环用色
    "grid": {
        "left": "48px",
        "bottom": "66px",
        "right": "80px",
        "top": "48px"
    },
    "xAxis": {

        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        },
        //坐标轴标签设置
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            "formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#bfbfbf"
            },
            "rotate": "45", //设置角度
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }

    },
    "yAxis": {

        "axisLine": {
            "lineStyle": {
                "color": "#f2f2f2"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        },
        //坐标轴标签设置
        "axisLabel": {
            //设置X轴标签文字最多显示5个文字，大于5个文字时显示前5个文字+...
            //"formatter": "function(value) {return value.length > 5 ? value.substring(0, 5) + '...' : value;}",
            "textStyle": {
                "color": "#bfbfbf"
            },
            //设置字体系列:温软雅黑
            "fontfamily": "Microsoft YaHei",
            //设置字体大小
            "fontsize": "12px"
        }

    }
}

六：仪表盘

1：270°仪表盘

在这里插入图片描述

{
    "tooltip": {
        "formatter": '{a} : {c}%'
    },
    "series": [{
        "type": "gauge",
        "radius": "80%",
        //设置圆的半径大小。
        "center": ["50%", "50%"],
        //设置中心在图框的位置，此居中。
        "axisLine": {
            "lineStyle": {
                "width": 10,
                "color": [
                    [
                        "0.33", "#62a9ff"
                    ],
                    [
                        "0.66", "#eebc23"
                    ],
                    [
                        "1", "#fb7293"
                    ]
                ]

            }
        },
        "axisLabel": {
            "formatter": '{value} %'

        }, //仪表盘轴线
        "splitLine": {
            "length": "10",
            "lineStyle": {
                "color": "#ffffff",

            }
        }, //仪表盘分割线
        "axisTick": {
            "length": "4"
        }, //仪表盘刻度
        "min": "0",
        "max": "1",
        "pointer": {
            "length": "60%",
            "width": "4"
        }, //仪表盘指针,设置最小和最大显示多少，如下最大显示100%，如数据非百分数格式而是数字则max为100
        "title": {
            "show": true,
            //"offsetCenter": ["0", "90%"],
            "color": "#898989",
            "fontSize": "14"
        }, //仪表盘标题
        "detail": {
            "fontSize": "12",
            "formatter": "签约率 \n {value}%"
        }, //此处detail的fontSize用于设置标柱数字字体大小,formatter是拼接其含义与标柱数字，若只保留后面的{value}%则只显示标柱数字。
        "data": [{
            "name": false
        }]
    }]
}
2：180°仪表盘

在这里插入图片描述

{
    "series": [{
        "startAngle": "180", //开始角度
        "endAngle": "0", //结束角度
        "type": "gauge",
        "radius": "95%",
        //设置圆的半径大小。
        "center": ["50%", "70%"],
        //设置中心在图框的位置，此横向居中，纵向略向下。
        "axisLine": {
            "lineStyle": {
                "width": "10",
                "color": [
                    [
                        "0.33", "#62a9ff"
                    ],
                    [
                        "0.66", "#eebc23"
                    ],
                    [
                        "1", "#fb7293"
                    ]
                ]
            }
        }, //仪表盘轴线
        "splitLine": {
            "length": "10",
            "lineStyle": {
                "color": "#ffffff",

            }
        }, //仪表盘分割线
        "axisTick": {
            "length": "4"
        }, //仪表盘刻度
        "min": "0",
        "max": "0.5",
        "pointer": {
            "length": "60%",
            "width": "4"
        }, //仪表盘指针，设置最小和最大显示多少，如下最大显示50%，如数据非百分数格式而是数字则max为50
        "title": {
            "show": false,
            //"offsetCenter": ["0", "90%"],
            "color": "#898989",
            "fontSize": "14"
        }, //仪表盘标题
        "detail": {
            "fontSize": "30",
            "backgroundColor": "#ffffff",
            "offsetCenter": ["0", "0"],
        } //仪表盘指示值，此处detail中的fontSize设置标柱数字的大小
    }]
}
3：360°仪表盘

在这里插入图片描述

{
    "series": [{
        "startAngle": "269.9", //开始角度
        "endAngle": "-90", //结束角度
        "type": "gauge",
        "radius": "80%",
        //设置圆的半径大小。
        "center": ["50%", "50%"],
        //设置中心在图框的位置，此居中。
        "axisLine": {
            "lineStyle": {
                "width": "10",
                "color": [
                    [
                        "0.33", "#62a9ff"
                    ],
                    [
                        "0.66", "#eebc23"
                    ],
                    [
                        "1", "#fb7293"
                    ]
                ]
            }
        }, //仪表盘轴线
        "splitLine": {
            "length": "10",
            "lineStyle": {
                "color": "#ffffff",

            }
        }, //仪表盘分割线
        "axisTick": {
            "length": "4"
        }, //仪表盘刻度
        "axisLabel": {
            "show": "true",
            "backgroundColor": "#FFFFFF"
        },
        "min": "0",
        "max": "1",
        "pointer": {
            "length": "60%",
            "width": "4"
        }, //仪表盘指针，设置最小和最大显示多少，如下最大显示50%，如数据非百分数格式而是数字则max为50
        "title": {
            "show": false,
            //"offsetCenter": ["0", "90%"],
            "color": "#898989",
            "fontSize": "14"
        }, //仪表盘标题
        "detail": {
            "fontSize": "30",
            "backgroundColor": "#ffffff",
            "offsetCenter": ["0", "0"],
        } //仪表盘指示值，此处detail中的fontSize设置标柱数字的大小
    }]
}

七：地图

1：散点地图

在这里插入图片描述

{
    "color": [
        "#62a9ff",
        "#c098ed",
        "#eebc23",
        "#c3e14c",
        "#53cee9",
        "#8378ea",
        "#67e0e3",
        "#9fe6b8",
        "#ffdb5c",
        "#ff9f7f",
        "#fb7293",
        "#e062ae",
        "#e690d1",
        "#e7bcf3",
        "#8378ea"
    ],
    "grid": {
        "left": "46px",
        "bottom": "66px",
        "right": "16px",
        "top": "46px"
    }
}
2：热力地图

在这里插入图片描述

{
    "color": [
        "#62a9ff",
        "#c098ed",
        "#eebc23",
        "#c3e14c",
        "#53cee9",
        "#8378ea",
        "#67e0e3",
        "#9fe6b8",
        "#ffdb5c",
        "#ff9f7f",
        "#fb7293",
        "#e062ae",
        "#e690d1",
        "#e7bcf3",
        "#8378ea"
    ],
    "grid": {
        "left": "46px",
        "bottom": "66px",
        "right": "16px",
        "top": "46px"
    }
}
3：染色地图

在这里插入图片描述

{
    "color": [
        "#62a9ff",
        "#c098ed",
        "#eebc23",
        "#c3e14c",
        "#53cee9",
        "#8378ea",
        "#67e0e3",
        "#9fe6b8",
        "#ffdb5c",
        "#ff9f7f",
        "#fb7293",
        "#e062ae",
        "#e690d1",
        "#e7bcf3",
        "#8378ea"
    ],
    "grid": {
        "left": "46px",
        "bottom": "66px",
        "right": "16px",
        "top": "46px"
    }
}
4：航线地图

在这里插入图片描述

{
    "legend": {
        "type": "scroll",
        //让图例可以滚动
        "width": "70%",
        "top": "16px"
    },
    "gird": {
        "top": "32px",
        "bottom": "32px"
    }
}
大强哥666
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Smartbi将Excel与Echarts融合，让数据报表可静可动
ray20151303007的博客
03-16 794
Excel作为最常用的办公软件之一，有一个很大的亮点就是作图，图表让数据一目了然；Excel本身的图表比如饼、柱、条、组合等模板操作也相对简单。 Echarts，一个使用 JavaScript 实现的开源可视化库，可以流畅地运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、
报表工具对比选型系列——图形
Raqsoft
07-01 624
”一图胜千言”，图形是报表展示中不可或缺的内容，没有图形的报表是没有灵魂的，所以大家在做报表工具选型考察的时候，都会很关注图形。 关注点基本有如下几条： 1. 自有图形的种类 自有图形通常是指工具内置的图形，不需要再扩展和引入。自有图形是报表的基本功能，它决定了报表工具的下限。 2. 对第三方图形的支持程度，以及特殊图形的绘制能力 当自有图形满足不了需求时就需要扩展，可以对接第三方，也可以自定义。虽然大部分需求可能使用自有图形就能满足，但遇到特殊需求时工具的扩展能力十分重要，这决定了报表工具的上限
4款echarts.js扁平图形统计图表代码
10-21
4款echarts.js扁平图形统计图表代码
SmartBI常用报表宏代码
zidieq的博客
09-21 2869
smartBI常用报表宏收集
【Echarts】使用及应用案例
最新发布
每天進步一點點
06-26 1476
第一种引入方式：把下载好的echarts.js 文件存放到js文件下，通过script标签的src属性引入。min:压缩 ，省去空格、换行，所有的代码在一行中书写。// 基于准备好的dom，初始化echarts实例。// 基于准备好的dom，初始化echarts实例。未压缩：保留的空格、换行。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 指定图表的配置项和数据。// 指定图表的配置项和数据。//鼠标指向柱状图浮出详情。//鼠标指向柱状图浮出详情。
思迈特软件Smartbi：数据可视化
思迈特Smartbi
09-08 554
一、数据可视化的定义 数据可视化，是关于数据视觉表现形式的科学技术研究。其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。 它是一个处于不断演变之中的概念，其边界在不断地扩大。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。与立体建模之类的特殊技术方法相比，数据可视化所涵盖的技术方法要广泛得多。 二、数据可视化的发展阶段 数据可视
超强可视化图表工具：Smartbi！！
明月说数据
05-26 2393
要制作出专业的可视化图表，还是需要一定的学习成本的，并且需要大量的时间。并且即使是制作出来，配色也是一大难题，对于一般人而言，通常会通过两种方式实现可视化大屏的制作： 1、写代码 大部分人可能会选择大数据可视化图表插件Echarts组件来做数据可视化，大数据可视化图表插件Echarts是百度的一款开源数据图表组件产品，它是一个纯Java的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游
echarts导出图片到word不显示数据的问题
l ﹉x `。的博客
06-03 1167
用echarts提供的接口导出图片只有图表没有数据 原echarts图： 导出后的echarts图：没有数据 根据官方给出的示例写代码，导出后没有数据 如果有动画效果的话，生成的图片会是在有动画效果出来以前的样子，就是说数据还没渲染上去，因此导出的图片没有数据。 解决方案： 1.去除动画效果 在option中添加属性animation，设置为false // An highlighted block // 指定图表的配置项和数据 let option = {
echarts饼图自动轮播和内容位置的显示
nz618的博客
04-01 4361
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> ...
报表工具对比选型系列——图形------报表工具选型时图形统计图应该怎么去作对比-------常见报表工具对比之统计图能力对比
terry_chengq的博客
10-20 759
”一图胜千言”，图形是报表展示中不可或缺的内容，没有图形的报表是没有灵魂的，所以大家在做报表工具选型考察的时候，都会很关注图形。 关注点基本有如下几条： 1. 自有图形的种类 自有图形通常是指工具内置的图形，不需要再扩展和引入。自有图形是报表的基本功能，它决定了报表工具的下限。 2. 对第三方图形的支持程度，以及特殊图形的绘制能力 当自有图形满足不了需求时就需要扩展，可以对接第三方，也可以自定义。虽然大部分需求可能使用自有图形就能满足，但遇到特殊需求时工具的扩展能力十分重要，这决定了报表工具的上限
Chart.js-柱状图分析（参数分析+例图）
十一月廿七风雨大作
06-13 2896
Chart.js-柱状图分析（参数分析+例图）柱状图样式总览基本写法参数解析条形图1 - 普通条形图条形图2 - 水平条形图条形图3 - 同比（放在一起比较）条形图条形图4 - 叠加条形图 柱状图样式总览 基本写法 首先在< script >标签里面引入chart.js： <script src="chart.js/Chart.js"></script> 然后创建一个画布： <canvas id="myChart" width="400" height="400
我做了一个可视化生成ECharts代码的应用，再也不用去看复杂的文档了...（附项目源码）
weixin_42678675的博客
06-22 1313
关于老板让我改个柱状颜色时，我看着ECharts文档懵圈的故事...（一个可视化生成常用ECharts代码的工具，拿去用！）
JS实现柱状图、折线图
海未眠的博客
02-26 6071
效果图： JSP页面： &lt;div class="canvesbox"&gt; &lt;div class="la"&gt; &lt;button class="aweek"&gt;最近一周&lt;/button&gt; &lt;select id=&q
js实现条形统计图
dianqianpang2137的博客
08-14 640
/** 条形统计图容器 width：统计图宽度（>=100）； height：统计图高度（>=450）； left：统计图左边距； top：统计图上边距； title：统计图标题（默认值：统计图）； unit：统计图单位（默认值：个）； bgc...
bi 建模流程图_流程图控件GoJS教程：使用模型和模板
weixin_39629075的博客
12-21 282
GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。您可以以编程方式构建节点和链接图。但GoJS提供了一种以更具说明性的方式构建图表的方法。您只提供图表所需的节点和链接数据(即模型)以及自动复制到图表中的零件实例(即模板)。可以通过节点和链接数据的属性来参数化这些...
SmartBi参数传值与JS报表宏及Mysql数据集特殊功能总结
liuzhiqiang66的博客
06-24 3115
SmartBi难点特殊功能总结 一、含名称代码无真实名称的表内联动 1、展示效果 ​ 如下图所示：实现的效果是：打开报表页面，默认机构选择所有机构，且机构可以人为手工输入，且在机构中不选择任何机构时，依然默认选择全部机构，即机构框中为空白时，依然默认全选，且机构可以人为多选或者单选。其他的如卫生人员类别构成和卫生人员单位构成等，默认选择所有类别，所有单位，点击当前图形时可以联动此报表页面上的其他图形或表格，且当前图形的下拉框展示为所点中的联动类别，以防用户忘记自己点击了哪个类别来联动其他图表，也可以借助下
第十二周作业——高级编程作业
yanglijun2_的博客
05-28 294
11 MatplotlibExercise 11.1:Plotting a function    plot the function f(x) = sin2(x-2)e^(-x^2)over the interval [0; 2]. Add proper axis labels, a title, etcimport numpy as np  import matplotlib . pyplot...
Matlab中legend函数使用
热门推荐
jk_101的博客
07-16 7万+
legend函数的功能是在坐标区上添加图例。
echarts柱状图（柱条颜色渐变，多条数据显示指定数据数）
ProgramarQin的博客
02-04 2万+
(上一篇echarts饼图与本页例子代码可在github（https://github.com/applebring/echarts-）上下载)--本打算与上一篇写一块，为防止篇幅过长分开写，echarts柱状图实现柱条渐变以及显示柱条数量限制 最终实现样式为： 先用图解释几个属性： tooltip.axisPointer.type:shadow: tooltip.ax
SmartBI报表工程师笔试题目解析
不同类型的图形，如Excel图形和Echarts图形，虽然类别不同，但它们之间可以设置数据联动，提供更丰富的用户体验。 最后，用户可以修改可视化数据集输出字段的排序设置，以适应不同的展示需求。在同一个电子表格报表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值