vue测试

<template>

<Col>

   <Card>

 

       <div id="myChart" :style="{width: '300px', height: '300px'}"></div>

 

  </Card>

 

</Col>

</template>

 

<script>

// 引入基本模板

let echarts = require('echarts/lib/echarts')

// 引入柱状图组件

require('echarts/lib/chart/bar')

// 引入提示框和title组件

require('echarts/lib/component/tooltip')

require('echarts/lib/component/title')

 

 export default {

 name:'myChart2',

  data () {

    return {

     

    }

  },

  mounted:function(){

    this.creatE(); //页面加载时加载方法从而绘制图标

  },

  methods: {

 

    creatE:function(){

 

        let myChart = this.$echarts.init(document.getElementById('myChart')) //获取id，指定地方绘制图表

         window.addEventListener('resize',function(){

         this.myChart.mychart.resize()

         })

          

        // 绘制图表（里面的内容和官网提供的一样）

        myChart.setOption({

 

 

        title: { text: '在Vue中使用echarts' },//标题

        color: ['#3398DB'],//颜色

        tooltip : {

        trigger: 'axis',

        axisPointer : {            // 坐标轴指示器，坐标轴触发有效

            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

        }

    },

    grid: {

        left: '3%',

        right: '4%',

        bottom: '3%',

        containLabel: true

    },

    xAxis : [

        {

            type : 'category',

            data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

            axisTick: {

                alignWithLabel: true

            }

        }

    ],

    yAxis : [

        {

            type : 'value'

        }

    ],

    series : [

        {

            name:'直接访问',

            type:'bar',

            barWidth: '60%',

            data:[10, 52, 200, 334, 587, 330, 220]

        }

    ]

 

 

 

        });

    }

  }

}

</script>

<style>

 

</style>