关于在vue中引用echarts和让echarts自适应于窗口的方法

哎呀，公司非要用vue做后台管理系统。我也是第一次做这种类型的项目，然后大家都知道的，后台管理系统不可或缺的就是数据统计图和表格了

对于走势图部分，我用的echarts;

在vue中用echarts的步骤：

一：npm install echarts --save 在本地目录安装echarts

 

二：在需要的组件中引入echarts

 

    import echarts from 'echarts/lib/echarts'
    import 'echarts/lib/chart/line'
    import 'echarts/lib/component/tooltip'
    import 'echarts/lib/component/legendScroll'

（我试过把整个echarts文件引入,也就是import echarts from 'echarts'，但是控制台会报错)

 

三：html部分

---

 <div id="charts" :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart"></div

四：vue中配置参数部分

  在data里声名一个chart选项  chart:null

props:{
           className: {
             type:String,
             default:'yourClassName'
           },
           id:{
             type:String,
             default:'yourID'
           },
           width:{
             type:String,
             default:'100%'
           },
           height:{
             type:String,
             default:'400px'
           }
        },

   methods: {
           initChart() {
                this.chart = echarts.init(this.$refs.myEchart);
                // 把配置和数据放这里
                this.chart.setOption({
                  tooltip: {
                    trigger: 'axis',
                  },
                  legend:{
                     icon:'rect',
                     itemWidth:15,
                     itemHeight:8,
                     itemGap:10,
                     data:['本月流量','上月流量'],
                     right:'20px',
                     textStyle:{
                        fontSize:12,
                        color:'#ccc'
                     }
                  },
                  xAxis: [{
                    type: 'category',
                     boundaryGap : false,
                     data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17'],
                  }],
                  yAxis: [{
                    type: 'value',
                    splitLine:{
                      show:false
                    }
                  }],
                  series: [{
                    name: '本月流量',
                    type:'line',
                    smooth:true,
                    itemStyle: {normal: {areaStyle: {type: 'default',color:'#00d7bf',opacity:'0.2'},color:'#00d7bf'}},
                    lineStyle:{color:'#00d7df',opacity:0.2},
                    data:[12330, 12334, 13300, 13444, 13000, 12567, 13400,12450,13000,13200,12343,13452,12345,12333,12345,12456,13456]
                   },
                   {
                     name:'上月流量',
                     type:'line',
                     smooth:true,
                     itemStyle: {normal: {areaStyle: {type: 'default',color:'#c4b03d',opacity:'0.2'},color:'#c4b03d'}},
                     data:[11200, 16534, 10433, 10678, 11435, 10444, 11000,11450,11000,10200,11343,10452,11345,10333,11234,10234,10222]

                  }]
              })
           },

把配置好的echarts挂载到dom节点

 mounted() {
            this.initChart();
        },

 

 

下面是关于让echarts自适应于窗口的部分

在methods里添加一个init方法

init() {
             const self = this;//因为箭头函数会改变this指向，指向windows。所以先把this保存
             setTimeout(() => {
                window.onresize = function() {
                    self.chart = echarts.init(self.$refs.myEchart);
                    self.chart.resize();
                }
             },20)
           }

把该方法加到mounted

 mounted() {
            this.initChart();
            this.init() //让echarts窗口自适应
        },

 

(完）