echarch.js的基本使用

• 安装

  • npm install echarts --save
  • 在main.js里import echarts from 'echarts'引入这个包。
  • Vue.prototype.$echarts = echarts 往原型链上加上echarts这样就可以在组件中使用了。

• 在Vue中开始一个例子

  <template>
    <div ref="projectMap" style="width: 100%;height:100%;"></div>
  </template>
  
  <script>
     export default {
  	mounted() {
          this.projectMap()
      },
  	methods: {
          projectMap() {
             var myChart = this.$echarts.init(this.$refs.projectMap)
     		   myChart.setOption({
                 title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
             })
          }
      }
  }
  </script>
  

  • 第一步：给这个图表一个盒子，并且要有宽高。
  • 第二部：新建一个方法，方法里先获取到这个盒子的dom，接着setOption加入这个图表的属性。这个属性可以单独抽出来比如var = option{ 属性 }。
  • 第三部：在mounted生命周期中，调用这个方法。一定要在这个生命周期里。因为只有这个生命周期才可以操作dom。