Vue前端使用Echarts

1. 通过npm获取Echarts

   npm install echarts --save
   

2. 打开package.json配置文件，若有echarts则代表安装成功
   

3. 在 main.js中引入echarts组件

   // echarts组件
   import * as echarts from 'echarts'
   
   // 全局方法挂载
   Vue.prototype.echarts = echarts
   

   

4. 在vue页面中使用

   注：根据自己所需图表更换配置项option，配置项可参考Echarts官网配置项或示例

   <template>
     <!--呈现图表的盒子-->
     <div id="myChart" style="width:600px;height:300px;"></div>
   </template>
   
   <script>
     export default {
       data() {
         return {};
       },
       mounted() {
         this.getChart();
       },
       created() {},
       methods: {
         getChart() {
           //基于准备好的dom，初始化echarts实例对象，决定图表最终呈现的位置
           let mChart = this.echarts.init(document.getElementById("myChart"));
   
           //准备配置项
           let option = {
             //直角坐标系 grid 中的 x 轴
             xAxis: {
               type: 'category', //坐标轴类型,可选
               data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //类目数据
             },
             //直角坐标系 grid 中的 y 轴
             yAxis: {
               type: 'value' //坐标轴类型,可选
             },
             series: [
               {
                 data: [120, 200, 150, 80, 70, 110, 130],
                 type: 'bar'
               }
             ]
           };
   
           // 将配置项设置给echarts实例对象
           mChart.setOption(option);
         }
       }
     };
   </script>
   

5. 效果如下：