象形柱图与柱状图组合

最新推荐文章于 2024-02-04 09:18:36 发布

触不到的颜色是否叫彩虹

最新推荐文章于 2024-02-04 09:18:36 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/qq_28259083/article/details/80362297

版权

echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background-color: #133148;
        }
    </style>
</head>
<body>
    <div id="main" style="width: 1000px;height:600px;">

    </div>
</body>
<script src="echarts.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));  
    var categoryArry = ['A','B','C','D','E']; 
    var arry = [9481,5000,475,399,1475];
    var max = 1.6*Math.max.apply(null,arry);
    var fzArry = [max,max,max,max,max];
    option = {
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //         type: 'shadow'
        //     }
        // },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '1%',
            top: '1%',
            containLabel: true
        },
        xAxis: {
            // max: 300,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            }
        },
        yAxis: [{
            type: 'category',
            inverse: false,
            data: categoryArry,
            axisLabel: { //坐标轴刻度标签的相关设置
                color: "#7eb2d5",
                fontSize:16
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
        }],
        series: [
            {
                name: '客户端用户总量',
                type: 'pictorialBar',
                // barWidth: 100,
                symbol: 'rect',
                symbolSize: ['20%',20],
                symbolPosition: 'start',
                symbolOffset: [5,0],//偏移量
                // symbolMargin: '20!',
                symbolRepeat: true,
                // barCategoryGap: 22,
                // symbolBoundingData: 700000,
                label: {
                    normal: {
                        show: true,
                        position: 'left',//标签的位置
                        distance: -750,
                        color: '#1df1f9',
                        fontSize: 16,
                        fontFamily: 'Quartz Regular',
                        // formatter: '{c}'
                        formatter: function(params){
                            return toThousandsForChart(params);
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#45A0CF',
                        // borderColor: '#45A0CF'
                    }
                },
                // z: 20,
                data: arry
            },
            {
                name: '辅助系列',
                type: 'bar',
                barWidth: 30,
                barCategoryGap: '10%', //22,
                data: fzArry,
                itemStyle: {
                    normal: {
                        color: 'rgba(255,255,255,0.1)',
                        borderColor: '#09687e',//['#09687e','#f19802','#09687e','#09687e','#09687e'],
                        borderWidth: 3,
                        barBorderRadius: [0, 20, 20, 0]
                    }
                },
                z: 9
            },

        ]
    };
    myChart.setOption(option); 
    // 
    function toThousandsForChart(params){
        var num = (params.value || params || 0).toString(), result = '';
        while (num.length > 3) {
            result = ',' + num.slice(-3) + result;
            num = num.slice(0, num.length - 3);
        }
        if (num) { result = num + result; }
        return result;
    }
</script>
</html>

这里写图片描述

触不到的颜色是否叫彩虹

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
象形柱图与柱状图组合

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=&lt;device-width&gt;, initial-scale=1.0&qu
复制链接

扫一扫