美文网首页
echart动态加载数据之饼状图

echart动态加载数据之饼状图

作者: vip4iPhonr | 来源:发表于2017-09-20 11:35 被阅读0次
    
layui.define('echarts', function(exports) {
    var echarts = layui.echarts,
        $ = layui.jquery;
    var myecharts = echarts.init(document.getElementById('echarts'));
    myecharts.showLoading({
        text : "正在努力的读取数据中。。。。。",
    })
    var option = {
            title: {
                text: '商户申请积分分布图',
                subtext: '数据来源商户',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data : [],
                /*data: [
                    { value: 335, name: '熟食' },
                    { value: 310, name: '水产' },
                    { value: 234, name: '蔬菜' },
                    { value: 135, name: '肉品' },
                    { value: 1548, name: '面包' }
                ],*/
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        $.ajax({
            type : "post",
            async : false, //同步执行
            url : contextpath + '/merchantintegral/integralcountlist?&time='+ new Date().getTime(),
            dataType : "json", //返回数据形式为json
            success : function(result) {
                if(result){
                    //初始化option.xAxis[0]中的data
                    for(var i=0;i<result.length;i++){
                      option.legend.data.push(result[i].name);
                    }
                    //初始化option.series[0]中的data
                    for(var i=0;i<result.length;i++){
                        /*option.series[0].data['value'].push(result[i].integral_val);
                            option.series[0].data['name'].push(result[i].name);*/
                        option.series[0].data.push({'name':result[i].name,'value':result[i].count});
                    }
                    myecharts.hideLoading();    //隐藏加载动画
                    myecharts.setOption(option);
                }
            },
            error: function(errorMsg) {
                alert("图表请求数据失败啦!");
            }
        })
        exports('echart', {});
});

  • 1》饼状图series加载方式
 option.series[0].data.push({'name':result[i].name,'value':result[i].count})

相关文章

  • echart动态加载数据之饼状图

    1》饼状图series加载方式

  • Echarts 实现多个 饼状图 动态显示

    根据 Echart 的文档,并没有类似的动态的形成饼状图的例子,所以这里博主想出一个方法,使用多个饼状图共同来完成...

  • YII2 echart 饼图 demo

    echart 使用 视图层view.php 此次针对 echart 饼状图。控制器代码类似。 主要记录一下数据格式...

  • Echart例子-笔录

    横向术状图(颜色根据条件) 横向柱状图(指定数据到坐标轴的映射) 多条数据散点图 Echart多饼图例子 1、先看...

  • charts3

    先进行charts饼状图的小测,如下,结果为正常饼状图 绘制前面数据库中的数据来找某一天交易的各类目物品的饼状图 ...

  • echart使用心得

    最近在弄商城的图表数据,要用到了echart.js,echart是支持多种图表的,有折线图,饼图,柱形图等等,我们...

  • 2018.9.8 雅思写作解析

    TASK 1 类型:动态饼状图 题目: Sources of the fish imports to US and...

  • VUE移动端项目中使用Echart

    安装Echart依赖 在main.js中引入 在组件中使用 关于响应式 我用到的代码及注释 折线图 饼状图(环形图)

  • echart.js制作树状图饼状图;

    模块化开发或者了解更多可以去官网http://echarts.baidu.com/echarts2/doc/doc...

  • echart动态加载数据之折线图

    几个重点 1》放在折线点的时候显示出相应x和y坐标相应的数据信息 2》修改图表的跟父容器的间距 3》设置折线图中折...

网友评论

      本文标题:echart动态加载数据之饼状图

      本文链接:https://www.haomeiwen.com/subject/ygonsxtx.html