Vue整合Echarets

Vue整合Echarets

需要在前端页面添加多个统计图,所以要把echarts整合进去

下载echarts

1. npm install echarts -S
   

2. 出现+ echarts@5.3.0下载完成

配置使用

1. 在main.js中配置

   1. import echarts from "echarts";
      Vue.prototype.$echarts = echarts
      

   2. 如果抱着个错的话hook: "TypeError: Cannot read properties of undefined (reading 'init')",那就把引入改成 import * as echarts from "echarts";

2. vue部分

   1. <div id="line" style="width:300px;height: 300px"></div>
      
      <script>
      export default {
          data(){
              return{}
          },
         methods:{
             
            line() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('line'))
            // 绘制图表
            myChart.setOption({
              title: {text: '在Vue中使用echarts'},
              tooltip: {},
              xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
              },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
              }]
            });
          },
             
         },
          
          mounted() {
          //echarts
          this.line()
        }
      }
      
      </script>
      
      

   2. 这样就欧克了,需要其他图表格参考官网即可