echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据

最近做的一个项目的其中一个页面有图表展示数据的需求,有柱状图、折线图和饼图,于是引入了强大的echarts.
echarts的强大之处和有点这里就不多说了,详细请参照echarts官网echarts在线demo
但是我们的页面要展示的数据比较多,同一个页面有数个折线图、柱状图和饼图。项目引入echarts的方法是模块化引入,于是就有了一个问题:怎么在同一个页面用echarts同时展示多个图?(如下图:两个图表区域,7个tab都是图表,其中包括柱状图、折线图、饼图,还有既有柱状图又有折线图)
两个图表区域,7个tab都是图表
使用了echarts的应该知道,echarts的使用是容器的ID和一个放入它的option对应,那么多个图的话,为了避免option冲突,把每个个ID的div容器对应一个函数,然后在每个对应的函数里定义其需要的option。
一下写这么多文字,看起来不太好理解,直接看代码:
1、echarts配置:

require.config({
    packages: [
        {
            name: 'echarts',
            location: 'echarts/src',
            main: 'echarts'
        },
        {
            name: 'zrender',
            location: 'zrender/src', // zrender与echarts在同一级目录
            main: 'zrender'
        }
    ]
});
require(
    [
        'echarts',
        'echarts/chart/line',
        'echarts/chart/bar',
        'echarts/chart/pie'
    ],
    drawExharts//在这里放所有的图表函数
);

2、定义drawExharts函数

function drawExharts(ec){
   $scope.fundBar(ec);
    $scope.equityBar(ec);
    $scope.equityBar_money(ec);
    $scope.equityPie_1(ec);
    $scope.equityPie_2(ec);
    $scope.debt_num(ec);
    $scope.debt_money(ec);
};

3、定义各个图表的函数,也就是这些:
每个图表的函数
函数的代码如下(由于这7个函数内部结构一样,只是option的参数不同,在此为了减少文章篇幅,仅给出一个示例):
其中一个函数
具体代码:

$scope.fundBar = function(ec){
    var fundChart = ec.init(document.getElementById('fundID1'));
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {     // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'   // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        title : {
            text: '图表-1',
            x:'center'
        },
        legend: {
            y:'bottom',
            selectedMode:false,
            data:['柯南', '福尔摩斯','希区柯克']
        },
        calculable : false,//禁止拖动
        xAxis : [
            {
                type : 'category',
                splitLine:{
                    show:false
                },
                data : [1,2,3,4,5,6]
            }
        ],
        yAxis : [
            {
                type : 'value',
                boundaryGap: [0, 0.1],
                // min:0,
                // max:700,
                // splitNumber:7
            }
        ],
        series : [
            {
                name:'柯南',
                type:'bar',
                stack: 'sum',
                barCategoryGap: '50%',
                itemStyle: {
                    normal: {
                        color: '#00ccff',
                        barBorderColor: '#00ccff',
                        barBorderWidth: 6,
                        barBorderRadius:0,
                        label : {
                            show: true, position: 'insideTop'
                        }
                    }
                },
                data:[220, 132, 201, 234, 190, 230, 360]
            },
            {
                name:'福尔摩斯',
                type:'bar',
                stack: 'sum',
                barCategoryGap: '50%',
                itemStyle: {
                    normal: {
                        color: '#99ff33',
                        barBorderColor: '#99ff33',
                        barBorderWidth: 6,
                        barBorderRadius:0,
                        label : {
                            show: true, position: 'insideTop',color:'#333'
                        }
                    }
                },
                data:[ 234, 190, 230, 360,200,210]
            },
            {
                name:'希区柯克',
                type:'bar',
                stack: 'sum',
                itemStyle: {
                    normal: {
                        color: '#ffcc00',
                        barBorderColor: '#ffcc00',
                        barBorderWidth: 6,
                        barBorderRadius:0,
                        label : {
                            show: true,
                            position: 'top',
                        }
                    }
                },
                data:[134, 190, 380, 330,166,160]
            }
        ]
    };
    fundChart.setOption(option);
};

如果需要动态放数据的话,可以把函数$scope.fundBar放进ajax请求的成功的回调函数里,同时,对应的require的代码也应该放进成功的回调函数。如果是动态存放数据的话,可以把文中上述的drawExharts函数也分开写,成功的回调函数示例如下:
成功的回调函数的结构
以上就是使用echarts在同一个页面展示多个图表的一种方法,希望对您有所帮助。

个人微信公众号:侦探小禾子,闲聊育儿生活星座塔罗牌,野生法考通过者免费法律咨询,欢迎关注!
这里写图片描述

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值