html语言rd,index.html

.container {width: 80%; margin: 30px auto 80px auto; }

.line { width: 100%; display: flex; justify-content: flex-start; align-items: center; }

.chart { width: 100%; height: 300px; }

var dataDomain = "http://101.200.201.27/adm/kkdata/kap/";

var vm = new Vue({

el: "#vm",

data: {

payFee: [],

users: [],

},

computed: {

},

methods: {

getPayFee: function(){

axios.get(dataDomain + "iv.php", {params: {do: "pay_fee"}}).then(function(r){

console.log(r.data);

vm.payFee = r.data;

vm.showPayfeeCharts();

}).catch(function(e){

console.log(e);

})

},

getUsers: function(){

axios.get(dataDomain + "iv.php", {params: {do: "users"}}).then(function(r){

console.log(r.data);

vm.users = r.data;

vm.showUsersCharts();

}).catch(function(e){

console.log(e);

})

},

showPayfeeCharts: function(){

let payfeeChart = echarts.init(document.getElementById("payfeeChart"));

let opt = rd.chart_option.createNew();

opt.add_series([{name: '收入', type: 'bar'}, {name: '执行收入', type: 'bar'}, {name: '执行率', type: 'line'}]);

opt.set_xAxis_datas(this.payFee, ["targetName"]);

for(let i in this.payFee){

let x = this.payFee[i];

opt.option.series[0].data.push(Number(x.pay_fee).toFixed(2));

opt.option.series[1].data.push(Number(x.r_fee).toFixed(2));

opt.option.series[2].data.push((Number(x.r_fee) / Number(x.pay_fee) * 100).toFixed(2));

}

opt.option.series[2].yAxisIndex = 1;

opt.option.yAxis[1].max = 100;

payfeeChart.setOption(opt.option);

},

showUsersCharts: function(){

let usersChart = echarts.init(document.getElementById("usersChart"));

let opt = rd.chart_option.createNew();

opt.add_series([{name: '体验课会员', type: 'bar'}, {name: '正式课会员', type: 'bar'}, {name: '正式课会员占比', type: 'line'}]);

opt.set_xAxis_datas(this.users, ["targetName"]);

for(let i in this.users){

let x = this.users[i];

opt.option.series[0].data.push(Number(x.ty_user).toFixed(0));

opt.option.series[1].data.push(Number(x.zk_user).toFixed(0));

opt.option.series[2].data.push((Number(x.zk_user) / Number(x.users) * 100).toFixed(2));

}

opt.option.series[2].yAxisIndex = 1;

opt.option.yAxis[1].max = 100;

opt.option.series[0].stack = opt.option.series[1].stack = "a";

usersChart.setOption(opt.option);

}

},

watch: {

},

mounted(){

this.getPayFee();

this.getUsers();

}

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史