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);