echarts动态刷新数据

2019-11-12 16:09:14来源：博客园阅读 ()

echarts动态刷新数据

在这次的项目中图表显示的部分比较多，这边给分享下用到的图表的数据刷新

饼图最后的效果

先看下

前端部分

<div div style="height: 40%; width: 17.5%; background-color: white;
margin-top: 20px; float: left; border-left: black;" id="member">

</div>

这是右边图的 echarts的html 一定要定义好大小

接下来是 js部分先定义一个模板官网有自己稍加修改（比较懒没加注释）

// 绘制会员量比例图表
    var memberChart = echarts.init(document.getElementById('member'));
        memberChart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            itemHeight: 10,
            itemWidth: 10,
            orient: 'vertical',
            x: 'center',
            y: 'bottom',
            icon: 'roundRect',
            formatter: function(name) {
                var index = 0;
                var clientlabels = ['新增会员','老会员'];
                var clientcounts = [621,32032];
                clientlabels.forEach(function(value,i){
                    if(value == name){
                        index = i;
                    }
                });
                return name + "  " + clientcounts[index];
            }
        },
        series: [
            {
                name:'男女比例',
                type:'pie',
                radius: ['45%', '53%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                data:[
                    {value:621, name:'新增会员'},
                    {value:32032, name:'老会员'},
                ],
                itemStyle: {
                    normal:{
                        label:{
                            position : 'outside',
                            formatter: '{d}%',
                            fontSize: 10,
                        },
                        labelLine :{
                            length: 2,
                            length2: 2,
                            show:false,
                        }
                    }

                }
            }
        ],
        color:['#0090FF','#F6A20C'],
        title: {
            subtext: '会员总人数',
            text: '32653',
            x: 'center',
            y: 'center',
            padding: 0,
            itemGap: 0,
            textStyle:{
                fontSize: 20,
            },
            subtextStyle:{
                fontSize: 10,
            },
        },
        graphic: {
            type: 'text',
            style:{
                x: 15,
                y: 15,
                font: 'bolder 1.2em "PingFang-SC-Medium", sans-serif',
                text:'今日新增会员比例',
            },
        },
    });

因为主副标题被我拿去显示不同数据了所有用上了

graphic

原生图形元素组件

接下来看下动态刷新数据的js

function reflushMember(data) {
        memberChart.setOption({
            legend: {
                formatter: function(name) {
                    var index = 0;
                    var clientlabels = ['新增会员','老会员'];
                    var clientcounts = [data.newMemberCount, data.oldMemberCount];
                    clientlabels.forEach(function(value,i){
                        if(value == name){
                            index = i;
                        }
                    });
                    return name + "  " + clientcounts[index];
                }
            },

            series: [
                {
                    data:[
                        {value:data.newMemberCount, name:'新增会员'},
                        {value:data.oldMemberCount, name:'老会员'},
                    ],

                }],
            title: {
                text:data.memberCount,
            }

    })
    }

主要就是把之前模板上的数据部分替换成后台获取到的数据

饼图的刷新就到这里

还有个横向柱状图其实都是差不多的但是还是也看下吧

先看效果

这是4个横向柱状图适应不同的搜索条件就看下月度top5的吧

<p id="monthTitle" style="position:absolute;margin-left: 18%;margin-top: 1.4%;
    font: bolder 1.2em PingFang-SC-Medium sans-serif;"></p>
    <div style="height: 100%;width: 100%;position:absolute;" id="monthArea"></div>

P标签是那个标题

// 绘制月度热力商圈图表
    var monthAreaChart = echarts.init(document.getElementById('monthArea'));
        monthAreaChart.setOption({
        dataset: {
            source: [
               /* [58212, '小郡干串串'],
                [78254, '钢管厂'],
                [41032, '耐克'],
                [12755, '金大福'],
                [20145, '肯德基'],*/
            ]
        },
        /*grid: {containLabel: true},*/
        xAxis: {name: '(人)',
            show:true,
            splitLine: {
                show: false
            }},
        yAxis: {type: 'category',
            axisLine:{show:false},     //坐标轴
            axisTick:[{    //坐标轴小标记
                show:false
            }],
        },
        grid:{
            height:'70%',
            y2:20,
            left:'15%',
        },
        series: [
            {

                textStyle:{
                    fontSize:10,
                },
                type: 'bar',
                encode: {
                    // Map the "amount" column to X axis.
                    x: 'amount',
                    // Map the "product" column to Y axis
                    y: 'product'
                },
                /*barWidth: 10,*/
                barGap:'70%',/*多个并排柱子设置柱子之间的间距*/
                barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: '#438CFF'
                        }, {
                            offset: 1,
                            color: '#20C0F4'
                        }]),
                        label: {
                            show: true, //开启显示
                            position: 'right', //在上方显示
                            textStyle: { //数值样式
                                color: 'black',
                                fontSize: 10
                            }
                        },
                    }
                },
            }
        ],
        graphic: {
            type: 'text',
            style:{
                x: 15,
                y: 15,
                font: 'bolder 1.2em "PingFang-SC-Medium", sans-serif',
                text:'月度TOP5',
            },
        },

上面是横向柱状图模板例子

var listTop5Result = result.listTop5Result;

                    for(var i = listTop5Result.length - 1; i >= 0; i--){
                        names.push(listTop5Result[i].deptName);    //挨个取出类别并填入类别数组
                    }
                    for(var i = listTop5Result.length - 1; i >= 0; i--){
                        nums.push(listTop5Result[i].num);    //挨个取出人次并填入销量数组
                    }
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption({        //加载数据图表

                        yAxis: {
                            data: names
                        },
                        series: [{
                            data: nums
                        }]

                    });