vue：http://doc.vue-js.com/v2/guide/instance.html
Echars：http://echarts.baidu.com/index.html
一，mvc 中使用Echars
1、为echars建立一个容器
<div id="main" style=" margin-left:400px; width: 650px;height:430px;" ></div>
2、通过url异步加载数据
var myChart = echarts.init(document.getElementById('main'));
//指定图表的配置项和数据
myChart.setOption({
title: {
text: "已自动化接口分布分析",
x: "center"
},
tooltip: {
trigger: "item",
formatter: "{a}
{b} : {c} ({d}%)"},
legend: {
},
label: {
normal: {
formatter: "{b} ({d}%)",
position: "insideTopRight"
}
},
labelLine: {
normal: {
smooth: .6
}
},
toolbox: {
show: !0,
feature: {
mark: {
show: !0
},
dataView: {
show: !0,
readOnly: !1
},
magicType: {
show: !0,
type: ["pie", "funnel"]
},
restore: {
show: !0
},
saveAsImage: {
show: !0
}
}
},
calculable: !0,
series: [{
name: "automationin test interface",
type: "pie",
radius : [30, 150],
roseType: "area",
label: {
normal: {
show: !0
},
emphasis: {
show: !0
}
},
lableLine: {
normal: {
show: !0
},
emphasis: {
show: !0
}
},
itemStyle: {
normal: {
shadowBlur: 10
}
},
data: [{
value: 100,
name: "baseinfo"
}, {
value: 80,
name: "UserMgmt"
}, {
value: 90,
name: "TradeMgt"
}]
}]
});
$.ajaxSettings.async = true;
$.getJSON("url", function (json) {
//填入数据
window.onresize = myChart.resize;
myChart.setOption({
series: [{
//根据名字对应到相应的系列
name: '',
data: json.data
}]
});
二、同过vue更新数据
1、为echars建立一个容器
<div id="main" style=" margin-left:400px; width: 650px;height:430px;" ></div>
2、通过VUE更新数据
varvm= newVue({
el:'#main',
data:{
reponsedata:{},
apiUrl:'/main/autodetail/panelPie'
},
ready: function(){
this.getPieInfoData();
},
methods:{
initPieInfoData:function() {
},
getPieInfoData: function(){
this.$http.get(this.apiUrl).then(function(response){
this.$set('reponsedata',response.data.test);
varChart=echarts.init(vm.$el);
//指定图表的配置项和数据
Chart.setOption({
title:{
text:"已自动化接口分布分析",
x:"center"
},
tooltip:{
trigger:"item",
formatter:"{a}
{b} : {c} ({d}%)"},
legend:{},
series:[{
name:"automationin test interface",
type:"pie",
radius:[30,150],
roseType:"area",
itemStyle:{
normal:{
shadowBlur:0,
shadowColor:'rgba(0, 0, 0, 0.5)'
}
},
data:response.data.test
}]
});
window.onresize=Chart.resize;
Chart.on('click', function() {
window.open('https://www.baidu.com/');
});
}).catch(function(response){
console.log(response);
})
}
}
});
