echarts图表 + js数据套入

时间 2019-12-11

原文原文链接

echarts

//这是一个简单的echarts图表html

</script>
    var proChart = echarts.init(document.getElementById('detail-pro'));
    var myChart = echarts.init(document.getElementById('money'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'xxxxxxxxxxxxxxxxxxx',
            bottom: 10,
        },
        tooltip: {},
        //这是横列
        xAxis: {
            type: 'category',
            //type : 'value',
            data: []
            //show:false
        },
        //这是竖列
        yAxis: {
            show: false
        },
        series: [{
            name: '产品1的数量',
            type: 'bar',
            data: [100],    //这里是数据
            itemStyle: {
                normal: {color: '#e26158'}
            },
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
        },
            {
                name: '产品2的数量',
                type: 'bar',
                data: [50],    //这里是数据
                itemStyle: {
                    normal: {color: '#23b7e5'}
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                }
            }]
    };
    var option2 = {
        series: [{
            type: 'liquidFill',
            data: [0.6],
            color: ['#f9a101'],
            radius: '80%',
            backgroundStyle: {
                borderWidth: 8,
                borderColor: '#2aabb1',
                color: '#fef4e2'
            },
            outline: {
                show: false
            },
            label: {
                normal: {
                    formatter: function (param) {
                        return  '总资产';
                    },
                    textStyle: {
                        color: '#2aabb1',
                        fontSize: 30
                    }
                }
            }

        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    proChart.setOption(option);
    myChart.setOption(option2);
</script>

PS：echarts看着写法很复杂很乱，但套数据就是这么简单echarts

//在返回的success里面使用proChart.setOption({ })，把echarts里你须要调接口显示的地方复制过来ui

//而后用data.属性套入就能够了，好比我要改 text显示我接口返回的名字,直接把包含text的一个小模块spa

//复制过来而后赋值就能够orm

success: function (res) {

    proChart.setOption({
        //加载数据图表
        title: {
            text: res.data.name,
            bottom: 10
        }
    });

     //獲取用戶信息
//拿到这个id，而后拼接这个加入这段html代码
//PS:原html里面的最好不要删，由于若是这段AJAX执行失败，原代码会自动补充上去，能够对用户有一个友好显示
     var userID = $('#userInfoID');
     _liHtml =
         '<li>手机号：'+ res.data.contactPhone +'</li>'+
         '<li>开始日期：  '+ res.data.institutionStartDateStr +'</li>'+
         '<li>结束日期：  '+ res.data.institutionEndDateStr +'</li>';
     userID.html(_liHtml);
},
error: function () {
    layer.msg('获取信息失败');
}

PS：htm

//这篇文章的重点 1 echarts数据套入 2 拼接html代码接口

//1,获取id ip

var userID = $('#userInfoID'); get

// _liHtml 这个是拼接产品

_liHtml = '<li>手机号：'+ res.data.contactPhone +'</li>'+

'<li>开始日期： '+ res.data.institutionStartDateStr +'</li>'+

'<li>结束日期： '+ res.data.institutionEndDateStr +'</li>';

//这个是插入这部分代码

userID.html(_liHtml);