Vue前端使用Echarts

谁借莪１个温暖的怀抱￠ 2024-03-31 17:06 63阅读 0赞

1.  通过npm获取Echarts
    
        npm install echarts --save
2.  打开package.json配置文件，若有`echarts`则代表安装成功  
    ![在这里插入图片描述][9f182de5e39341719c9987935cb31644.png_pic_center]
3.  在 main.js中引入echarts组件
    
        // echarts组件
        import * as echarts from 'echarts'
        
        // 全局方法挂载
        Vue.prototype.echarts = echarts
    
    ![在这里插入图片描述][69e51967d14b4c8ba88cf8cc6d10b42d.png_pic_center]
4.  在vue页面中使用
    
    **注：根据自己所需图表更换配置项option，配置项可参考[Echarts官网][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.  效果如下：
    
    ![在这里插入图片描述][8bdd12644ff04cf792cf6614fb85f75c.png_pic_center]

[9f182de5e39341719c9987935cb31644.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b7673fd532d64624b9a99b7ab237865e.png
[69e51967d14b4c8ba88cf8cc6d10b42d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/967b117a2de94d0aa195828da6c5c86e.png
[Echarts]: https://echarts.apache.org/zh/option.html#title
[8bdd12644ff04cf792cf6614fb85f75c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6756c8f916a64e7ba5f9b7a50b771ec8.png