vue中使用Echars（二）
1、使用Vue.directive 自定义指令。
Vue.directive('echarshis',function (data) {
var myChart = echarts.init(document.getElementById(data.ele));
var app = {};
option = null;
option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis',
"axisPointer": {
"type": "shadow"
},
},
legend: {
orient: 'vertical',
top:'top',
data: []
},
grid: {
"borderWidth": 10,
"y2": 120,
"containLabel":true
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['bar','line']},
restore: {},
saveAsImage: {}
}
},
xAxis: [
{
"type": "category",
"splitLine": {
"show": false
},
"axisTick": {
"show": false
},
"splitArea": {
"show": false
},
"axisLabel": {
"interval": 0,
"rotate": 45,
"show": true,
"splitNumber": data.lens,
"textStyle": {
"fontFamily": "微软雅黑",
"fontSize": 10
}
},
"data": data.prj
}
],
yAxis: {
"type": "value",
"splitLine": {
"show": false
},
"axisLine": {
lineStyle: {
color: '#90979c'
}
},
"axisTick": {
"show": false
},
"axisLabel": {
"interval": 0,
},
"splitArea": {
"show": false
},
},
dataZoom: [
{
"show": true,
"height": 30,
"xAxisIndex": [
0
],
bottom:40,
"start": 0,
"end": 80
},
{
"type": "inside",
"show": true,
"height": 15,
"xAxisIndex": [
0
],
"start": 1,
"end": 35
}
],
series: [
{
name:'严重Bug',
type:'bar',
data: data.seBug,
markPoint: {
data: [
{type: 'max', name: '最大值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
window.onresize = myChart.resize;
});
data 为json类型。
2、声明一个容器
<div id="prjcharhis" style="width:650px;height:480px;" v-echarshis="{ele:'prjcharhis',text:'',prj:prjList,seBug:seBugList,lens:len}" ></div>
3、创建一个Vue实例
var vmhischar = new Vue({
el: '#prjcharhis',
data:{
prjList:[],
seBugList:[],
len:'',
apiUrl: '/main/index/*****'
},
ready: function(){
this.getHisInfoData();
},
methods: {
initHisInfoData:function() {
},
getHisInfoData: function(){
this.$http.get(this.apiUrl).then(function(response){
this.$set('prjList', response.data.prjList);
this.$set('seBugList', response.data.seBugList);
this.$set('len',response.data.prjList.length);
}).catch(function(response){
console.log(response);
})
}
}
});
备注：vmhischar.$el=id=data.ele
