echarts柱图自定义为硬币堆叠的形式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts柱图自定义为硬币堆叠的形式相关的知识,希望对你有一定的参考价值。

看这标题,可能会有一些人不太明白,那么直接上图,就是柱图展示形式如下图(兼容IE8)

技术分享

要想实现这样展示效果。我们想用echarts直接实现不行的,即使是纹理填充也不可行的,但是我们可以借助echarts柱图展示来进行二次操作来现实。那么如何实现呢?

下面我们开始讲解:

1.思路:

从设计图中,我们要知道蓝色部分随着值的变化而变化,而灰色部分高度是不变的。

我们可以通过把柱图的透明度设为0,然后获取每根柱图的高度,每根柱图的位置,然后创建一个元素,把获取到每根柱图的高度和位置赋给这个元素,通过设置元素背景图片填充样式来实现

2.根据上面的思路,那就开始着手了,直接上代码

先把样式设置好:

    <style>
        *{margin: 0;padding: 0;}
        .bar-p,.bar-g{
            position: absolute;
            z-index: 9999;
            width:22px ;/*柱图的宽度*/
        }
        .bar-p>span,.bar-g>span{
            position: absolute;
            left: 50%;
            width: 80px;
            text-align: center;
            margin-left: -40px;
            margin-top: -18px;
        }
        .bar-g>span{
            color: #808182;
        }
        .bar-p>span{
            color: #0b7cd1;
        }
        .bar-p{background: url("../img/bar.png") repeat-y 50% 100%;}
        /*灰色的在这里高度是固定的,不管多大值*/
        .bar-g{background: url("../img/bar1.png") no-repeat 50% 100%;height: 5px!important;}
    </style>

html和js代码:

<div id="main" style="width: 60%; height: 500px;margin:10px auto;"></div>
    <script>
        /*
        * @echarts3版本:v3.2.2
        * */
        var option=null,xAxisData=[],numData=[],numData1=[];
        for(var i=1;i<9;i++){
            xAxisData.push(币种+i);
            if(i>=6) numData[i-1]=-10;
            else numData[i-1]=i*20;
            numData1[i-1]=Math.abs(numData[i-1]);
        }
        option = {
            color: [#3398DB],
            tooltip : {
                trigger: item,
                formatter:{b}:{c},
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : shadow        // 默认为直线,可选为:‘line‘ | ‘shadow‘
                }
            },
            grid: {
                left: 3%,
                right: 4%,
                bottom: 3%,
                containLabel: true
            },
            xAxis : [
                {
                    type : category,
                    data : xAxisData,
                    axisLine:{
                        lineStyle:{
                            color:#ccc
                        }
                    },
                    axisTick:false // 坐标轴刻度不显示的话直接这样
                }
            ],
            yAxis : [
                {
                    type : value,
                    axisLabel:{
                        show:false
                    },
                    splitLine:{
                        lineStyle:{
                            color:#ddd
                        }
                    },
                    axisLine:{
                        show:false
                    },
                    axisTick:false // 坐标轴刻度不显示的话直接这样
                }
            ],
            series : [
                {
                    type:bar,
                    barWidth: 22,
                    data:numData1,
                    itemStyle:{
                        normal:{
                            opacity:0
                        }
                    }
                }
            ]
        };
        var myChart = echarts.init(document.getElementById(main));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        /*
        * getModel() echarts模型的获取
        * getSeriesByIndex(i) 这个i表示series的下标,现在的series只有一个 所以直接是0
        * */
        var model=myChart.getModel(),
            layer=model.getSeriesByIndex(0),
            layouts=layer._data._itemLayouts;// 获取每根柱图的位置和高度和宽度
        var div=document.getElementById(main).getElementsByTagName(div)[0]; // 获得div
        var elem,height=document.getElementById(main).offsetHeight,bottom=height-layouts[0][y];
        for(var i= 0,len=layouts.length;i<len;i++){
            elem=document.createElement(div);
            if(numData[i]<0) elem.className=bar-g;
            else elem.className=bar-p;
            elem.style.bottom=bottom+px;
            elem.style.left=layouts[i][x]+px;
            elem.style.height=Math.abs(layouts[i][height])+px;
            elem.innerHTML=<span>+numData[i]+</span>;
            div.appendChild(elem);
        }
    </script>

 

运行结果如下:

技术分享

 

以上是关于echarts柱图自定义为硬币堆叠的形式的主要内容,如果未能解决你的问题,请参考以下文章

echarts - 特殊需求实现代码汇总之柱图篇

echart 饼状图自定义样式

echarts图表——主题河流图&象形柱图

Echarts3的饼图自定义标注怎么设置

Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度

Echarts立体地图加3D柱图可点击可高亮选中的开发