博客
关于我
ECharts——双向柱状图
阅读量:373 次
发布时间:2019-03-04

本文共 6070 字,大约阅读时间需要 20 分钟。

<!DOCTYPE html><html><head> @include('./header.html', { "title": "首页" }) </head><body>    <div class="wrap">        <div id="echart_test2"></div>        <div id="echart_test"></div>    </div>    <script src="dist/js/lib/jquery/jquery-3.3.1.min.js"></script>    <script src="dist/js/lib/echarts/echarts-4.2.1.min.js"></script>    <style>        #echart_test {                display: inline-block;            width: 400px;            height: 400px;        }                #echart_test2 {                display: inline-block;            width: 400px;            height: 400px;        }    </style></body><script>    var sechart2 = echarts.init(document.getElementById('echart_test'));    // var salvProName = ["安徽省", "河南省", "浙江省", "湖北省", "贵州省", "江西省", "江苏省", "四川省", "云南省", "湖南省"];    var salvProValue = [55, 67, 72, 74, 117, 135, 144, 154, 181, 239];    var salvProMax = []; //背景按最大值    for (let i = 0; i < salvProValue.length; i++) {            salvProMax.push(salvProValue[0])    }    option = {            backgroundColor: "white", //设置背景颜色        grid: {                left: '0%', //设置左边距            right: '0%',            bottom: '5%', //设置条状间距            top: '2%', //设置顶部间距            containLabel: true        },        tooltip: {                // trigger: 'axis',  //条状图阴影是否显示            // show: true,            axisPointer: {                    // type: 'shadow' //添加条状阴影            },            formatter: function(params) {                    return params[0].name +                    ' : ' + params[0].value            }        },        xAxis: {                show: false, //Y轴            type: 'value'        },        yAxis: [{                type: 'category',            inverse: true, // 显示顺序            axisLabel: {                    show: true,                textStyle: {                        color: 'black' //左侧字体颜色                },            },            splitLine: {                    show: false            },            axisTick: {                    show: false            },            axisLine: {                    show: false            },            // data: salvProName    //左侧文字显示        }, {                type: 'category',            inverse: true, //控制数字显示方向            axisTick: 'none',            axisLine: 'none',            show: true, //控制数字显示            axisLabel: {                    textStyle: {                        color: 'black',                    fontSize: '12'                },            },            data: salvProValue //数字显示        }],        series: [{                name: '值',            type: 'bar',            zlevel: 1,            itemStyle: {                    normal: {                        barBorderRadius: 30,                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{                            offset: 0,                        color: ' #2da5f1'                    }, {                            offset: 1,                        color: ' #58b7f4 '                    }]),                },            },            barWidth: 15, //条状图显示宽度              data: salvProValue        }, {                name: '背景',            type: 'bar',            barWidth: 15, //条状图占比宽度            barGap: '-100%', //top边距            barCategoryGap: '10%',            data: salvProMax,            itemStyle: {                    normal: {                        color: 'white',                    barBorderRadius: 30,                }            },        }, ]    };    sechart2.setOption(option)</script><script>    var sechart8 = echarts.init(document.getElementById('echart_test2'));    var yData = ['铜川市', '汉中市', '西安市', '商洛市', '延安市', '榆林市', '宝鸡市', '渭南市', '咸阳市', '安康市'];    var dataArr = [239, 181, 154, 144, 135, 117, 74, 72, 67, 55];    // var allDataArr = [5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000, 5000];    var option = {            backgroundColor: '#fff',        tooltip: {                show: false,            trigger: 'axis',            padding: [5, 5],            axisPointer: {                    type: 'shadow'            },            formatter: function(param) {                    return param[0].name + ":" + param[0].value            }        },        grid: {                left: '0%', //设置左边距            right: '0%',            bottom: '10%', //设置条状间距            top: '2%', //设置顶部间距            containLabel: true        },        xAxis: {                type: 'value',            axisLabel: {                    show: false            },            axisTick: {                    show: false            },            axisLine: {                    show: false            },            splitLine: {                    show: false            },            inverse: true        },        yAxis: [{                type: 'category',            data: dataArr,            // inverse: true,            axisLabel: {                    color: "#000",                fontSize: 12            },            axisTick: {                    show: false            },            axisLine: {                    show: false            }        }, {                type: 'category',            axisTick: 'none',            axisLine: 'none',            show: true,            axisLabel: {                    textStyle: {                        color: '#333',                    fontSize: 12                }            },            // data: dataArr        }],        series: [{                name: '',            type: 'bar',            data: dataArr,            barCategoryGap: '10%',            barWidth: 15,            zlevel: 1,            itemStyle: {                    normal: {                        barBorderRadius: 30,                    color: '#ebac4b'                }            }        }, {                name: '',            type: 'bar',            barWidth: 15,            barGap: '-100%',            barCategoryGap: '10%',            // data: allDataArr,            itemStyle: {                    normal: {                        color: '#fff'                }            }        }]    };    sechart8.setOption(option)</script></html>
  1. 样式图
    在这里插入图片描述

转载地址:http://syfg.baihongyu.com/

你可能感兴趣的文章
logstash mysql 准实时同步到 elasticsearch
查看>>
Luogu2973:[USACO10HOL]赶小猪
查看>>
mabatis 中出现&lt; 以及&gt; 代表什么意思?
查看>>
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>