vue2.0使用echarts入门

1.在vue2.0中使用echarts需要通过npm进行安装
npm install echarts --save
2.在需要使用echarts库的.vue页面引用echarts

<template>
  <div>
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>
<script>
  var echarts = require('echarts');
  export default{
      data(){
          return {
              option:{
                 title:{
                     text:'echarts'
                 },
                toolbox:{
                     show:true,
                     feature:{
                         saveAsImage:{
                             show:true
                         }
                     }
                },
                legend:{
                     data:['销量']
                },
                xAxis:{
                     data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis:{},
                series:[{
                     name:'销量',
                     type:'bar',
                     data:[5, 20, 36, 10, 10, 20]
                } ]
              }
          }
      },
      methods:{
          set(){
              let myChart = echarts.init(document.getElementById('main'));
              myChart.clear();//如果图表有修改需求建议加上此方法先清后画
              myChart.setOption(this.option);
          }
      },
      mounted(){
          this.set();
      }
  }
</script>
<style scoped>

</style>

上面通过var echarts = require('echarts');引入,在methods中就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
在mounted生命周期的时候运行此方法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一直以来,我都觉得女孩吸烟是很帅的,特别是长得漂亮的女孩,吸烟就更帅。 不过我自己是不吸烟的,至少在大学毕业之前是...
    老老老老老老老金阅读 1,862评论 13 6
  • 最近调试代码,make 输出信息的时候 error 、warning 等信息都是和普通信息一样白色打出来的,和普通...
    爪爪熊阅读 1,789评论 0 6
  • 很多屌丝逆袭的男人一旦手头有点资本,便热衷于追逐名女人,这到底是源自男人天生的野心征服欲,还是因为内心的匮乏感? ...
    气和神莹阅读 849评论 0 1