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、声明一个容器

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