vue使用echats

vue中使用echat简写
1、安装echat模块
npm install echarts --save

2、在项目中引入echat模块，并且使用它，比如在main.js中写下如下代码

import echarts from 'echarts';	 //引入echats
Vue.prototype.$echarts = echarts;	 //将echarts注册成Vue的全局属性

3、在自己的example.vue代码中使用它
1）界面元素中添加如下代码，用来将后续的图标文件放入容器中

<div>
	<div id="circleCenter" class="circleCenter" ></div>
</div>

2）定义图标的相关初始化内容，并且展现在界面上

//以下方法写在method块中
draw(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('barBlue'))
        // 绘制图表
        myChart.setOption(
        {
          color: ['#3398DB'],
          tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis : [
              {
                  type : 'category',
                  data : ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日', '7月8日', '7月9日'],
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : [
              {
                  name:'直接访问',
                  type:'bar',
                  barWidth: '10%',
                  data: [10, 52, 200, 334, 390, 330, 220, 300, 800]
              }
          ]
        }
        );
    }

3）在mounted块中调用上述代码

this.draw();

4、最终效果图