echarts 中 请求后台改变数据

function tablenumber() {

$.ajax({

type : "get",

url : "../res/error.json",

dataType : "json",

success : function(data){

console.log(data);

vm.SuccessNumber = data.SuccessNumber;

vm.failNumber = data.failNumber;

vm.malfunctionNumber = data.malfunctionNumber;

var arr = [];

arr[0] = {};

arr[0].value = data.malfunctionNumber;

arr[0].name = (arr[0].value / (data.failNumber + data.SuccessNumber)*100).toFixed(2) + '%';

arr[1] = {};

arr[1].value = data.failNumber;

arr[1].name = (arr[1].value / (data.failNumber + data.SuccessNumber)*100).toFixed(2) + '%';

arr[2] = {};

arr[2].value = data.SuccessNumber;

arr[2].name = (arr[2].value / (data.failNumber + data.SuccessNumber)*100).toFixed(2) + '%';

option.series[0].data=arr;

myChart.setOption(option);

//console.log(option.series[0].data)

var oLen=option.series[0].data.length;

var json=[];

for(var i=0;i<oLen;i++){

var num = option.series[0].data[i].value;

json.unshift(num/100);

}

json.forEach(function(t, i){

createCircle('small-chart' + i, t, colorpic[i])

})

// option.series[0].data[0].value = vm.malfunctionNumber;

// console.log(option.series[0].data[0].value);

}

})

}

 

var vm = new Vue({
el : "#app",
data(){
return{
SuccessNumber : "",
failNumber : "",
malfunctionNumber : "",
echarData: []
}
}
})
var myChart = echarts.init(document.getElementById('main'));
var names = ['成功数', '故障数', '失败数'];
var colors = ['#6562cc','#f3545a','#fac46f'];
option = {
grid: {
top: 0,
left: 0,
bottom: 0,
right: 0
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return names[params.dataIndex] + '：' + params.value + ' (' + params.name + ')';
}
},
calculable: true,
series: [{
type: 'pie',
radius: [0, document.body.offsetWidth > 320 ? 110 : 90],
roseType: 'area',
animation: false,
// data: vm.echarData,
// data: [
// {
// value: 10,
// name: (10 / 100 * 100).toFixed(2) + '%'
// },
// {
// value: 20,
// name: (20 / 100 * 100).toFixed(2) + '%'
// },
// {
// value: 80,
// name: (80 / 100 * 100).toFixed(2) + '%'
// }
// ],
itemStyle: {
normal: {
color: function(params) {
return colors[params.dataIndex];
}
}
}
}]
};
// myChart.setOption(option);
// //console.log(option.series[0].data)
// var oLen=option.series[0].data.length;
// var json=[];
// for(var i=0;i<oLen;i++){
// var num = option.series[0].data[i].value;
// json.unshift(num/100);
// }
//console.log(typeof json);
/**
* @param {Object} id
* @param {Object} percent 百分比 0-1
* @param {Object} color 颜色
*/
function createCircle(id, percent, color) {
var wrap = document.getElementById(id);
var w = wrap.offsetWidth * 2;
var canvas = document.createElement('canvas');
canvas.height = w;
canvas.width = w;
wrap.appendChild(canvas);
var ctx = canvas.getContext("2d");
ctx.lineCap = 'round';
ctx.strokeStyle = color;
ctx.lineWidth = 12;
ctx.beginPath();
ctx.arc(w * 0.5 + 1, w * 0.5 + 2, w * 0.3 - 2, -0.5 * Math.PI, (percent - 0.25) * 2 * Math.PI);
ctx.stroke();
}
var colorpic=['#fac46f','#f3545a','#6562cc'];