在vue中的简单使用Echars

vue：http://doc.vue-js.com/v2/guide/instance.html

Echars：http://echarts.baidu.com/index.html

一，mvc 中使用Echars

1、为echars建立一个容器

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建立一个容器

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

})

}

}

});