vue项目中使用Echarts绘图的步骤

1.通过npm获取echarts (通过cmd中打开项目文件)

npm install echarts --save

2.在vue项目中引入echarts：

①在main.js中写入下面两行代码

import * as echarts from ‘echarts’;
Vue.prototype.$echarts = echarts

②新建Echarts.vue文件

//在Echarts.vue文件中，写入下面的代码块：

<template>
  <div class="Echarts">
    <div id="main" style="width: 600px;height: 400px;"></div>
  </div>
</template>
 
<script>
export default {
  name: 'Echarts',
  methods: {
    myEcharts(){
      var myChart = this.$echarts.init(document.getElementById('main'));
      //配置图表
      var option = {
        title: {
          text: 'echarts入门示例',
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5,20,36,10,10,20]
        }]
      };
      myChart.setOption(option);
    }
  },
  mounted(){
    this.myEcharts();
  }
}
</script>
 
<style>

</style>

③在App.vue文件中 引入-注册-使用上述定义的组件 Echarts.vue

附录：
Echarts官网：

https://echarts.apache.org/handbook/zh/get-started/