vue集成echarts

时间:2025-03-10 15:27:12

1、安装echarts插件

     npm install echarts --save

     注意:安装后可能会出现echarts加载报"property 'init' of undefined",网上很多解决办法,我这边是降低echarts安装版本解决的即上面的命令替换为 npm install echarts@4.8.0 --save

2、全局配置 

      import echarts from 'echarts';
      Vue.prototype.$echarts=echarts;
      (echarts)

3、页面使用      

     <template>
           <div style="width:100%;height:260px"></div>
     </template>
     <script>
     export default {
       name: "RightPanel",
       mounted() {
         ();//加载图表
       },
       methods: {
         drawEcharts() {
           //初始化echarts实例
           let echartsDiv = this.$(("echartsCont"));
           // 绘制图表
           (echarts图表的option带{}对象丢进来即可);
         }
       }
     }
     </script>