vue从0-1使用echarts的方法

引言：

echarts不会去区分v2或者v3的区别，所以普遍上来说，还是可以通用这一套流程的。

直接cv便可以直接使用

目录：    

        （1）安装

                       

 npm install echarts --save

        （2）使用echarts——在mian.js文件中使用
                        

import { createApp } from 'vue'
                        import App from './App.vue'
                        //引入echarts
                        import * as echarts from 'echarts';
 
                        const app= createApp(App)
                        //放入全局
                        app.config.globalProperties.$echarts = echarts
                        app.mount('#app')

使用:

                我们这边进行折线图演示

        （1）、html部分去注册这个div成为echarts，声明一个class即可（获取这个节点）
                       

  <div id="main2" class="echarts" style="width:100%;height:300px;"></div>

        （2）、通过js事件、去声明这个echarts的结构（一定要仔细看下面代码的注释）

// echarts图
    getmain2() {
//获取到html的节点，注册为myChart
      let myChart = this.$echarts.init(document.getElementById("main2"));
      let option = {
//横坐标
        xAxis: {
          type: "category",
          name: '年、月',
          data: this.echarttable.months,
        },
        legend: {},
        toolbox: { //工具栏   详细的话自己可以开注释区分功能
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            saveAsImage: { show: true }
          }
        },
        tooltip: {
          trigger: "axis" //显示当前列的所有信息
        },
//纵坐标
        yAxis: {
          type: "value",
          name: '通过率%',
          axisLabel: {
            formatter: '{value} %', // 设置纵坐标显示百分比形式
          },
        },
//配置在横坐标信息
        series: [
          //数据   五条折线数据  line 折线********************这边一定要自己按照结构在添加几条数据****
          {
            name: '海口市公安局秀英分局(百分比)',
//这个如果没有后端数据，记得换成data假数据
            data: this.echarttable.xiuying,
            type: "line"
          },
        ]
      };
      // 注册echarts的option
      myChart.setOption(option);
    },

        （2.1 ）、js部分注册，这个声明的echarts  （这里声明的是option）

                        myChart.setOption(option);

        结语：这样再修缮一下data内容就可以正常展示啦！记住主要的注册步骤其实很好理解！

好啦，希望对你有所帮助！