vue中使用Echarts(超级详细！一步一步教，没有学不会的)

先在项目中安装echarts包

npm i echarts

如果需要3D渲染 还需安装

npm i echarts-gl

包安装完以后 package.json里面会出现两个安装包

安装成功后 

在main.js里面引入

// 引入Echarts

import * as echarts from 'echarts';

import 'echarts-gl';

Vue.prototype.$echarts = echarts //可以全局使用 不用每次使用需要在页面导入

在页面中使用echarts

//例如

*HTML部分

<div class="echar" ref="charts"></div>

*JS里

 data() {
    return {
      chartInstance: null,
      };
    },
    mounted() {
    this.initChart();
    this.getData();
    },
     methods:{
        initChart() {
        this.chartInstance = this.$echarts.init(this.$refs.charts);
     },
    updateChart(){
    //配置echarts
    const option={
       tooltip：{      //echarts提示框配置
              trigger: //触发类型，可选值有 'item'（数据项图形触发）和 'axis'（坐标轴触发）。默认为 'item'。
              formatter: //提示框显示内容格式化函数，可以自定义提示框的显示内容。例如：{a}：{b}。
              position:// 提示框位置，可选值有 'auto'（自动计算位置）、'inside'（数据项内部）、'insideLeft'（数据项左侧）、'insideRight'（数据项右侧）、'insideTop'（数据项顶部）、'insideBottom'（数据项底部）。
              backgroundColor: //提示框背景颜色。
              borderColor: //提示框边框颜色。
              borderWidth: //提示框边框宽度。
              padding: //提示框内边距。
              shadowColor: //提示框阴影颜色。
              shadowBlur: //提示框阴影模糊大小。
              shadowOffsetX: //提示框阴影水平偏移。
              shadowOffsetY: //提示框阴影垂直偏移。
              textStyle: //提示框文本样式，包括字体大小、颜色等。
              extraCssText:// 附加的 CSS 样式。
             },
                grid:{                         //可以决定图表的坐标轴、图例、提示框等组件的位置和大小
                  left：                       //指定图表容器距离容器左侧的距离，默认为0。
                  right：                      //指定图表容器距离容器右侧的距离，默认为0。
                  top：                        //指定图表容器距离容器顶部的距离，默认为0。
                  bottom：                     //指定图表容器距离容器底部的距离，默认为0。
                  containLabel：               //布尔值，表示是否将标签放置在图表容器内部，默认为true。
                  containWith：                //指定需要包含在坐标轴区域内的组件类型，默认为'dataZoom'。
                  show：                      //指定需要显示的组件类型，默认为'none'。
                  xAxisIndex：                //指定需要调整位置的x轴索引，默认为0。
                  yAxisIndex：                //指定需要调整位置的y轴索引，默认为0。
                  zAxisIndex：                //指定需要调整位置的z轴索引，默认为0。
                  seriesIndex：               //指定需要调整位置的系列索引，默认为0。
            },
            xAxis:{
              type: //指定x轴的类型，可以是'category'（类目型）、'time'（时间型）或'value'（数值型）。根据你的数据类型选择合适的类型。
              data: //设置x轴的数据，可以是一个数组或对象。如果是数组，每个元素代表一个类别或时间点；如果是对象，键名对应类别或时间点，值对应对应的数值。
              axisLabel: //设置x轴的标签文字，可以是字符串数组。
              axisLine: //设置x轴的轴线样式，可以是线条样式对象或颜色。
              splitLine: //设置x轴的分割线样式，可以是线条样式对象或颜色。
              axisTick: //设置x轴刻度线样式，可以是线条样式对象或颜色
              splitNumber: //设置x轴分割线的段数。
              min和max: //设置x轴的最小值和最大值。
            },
            yAxis:{         //yAxis（Y轴）是配置图表的垂直轴。它用于定义数据在垂直方向上的刻度和标签。
                type: 'value', // 设置y轴的类型为数值型
                min: 0, // 设置y轴的最小值为0
                max: 100, // 设置y轴的最大值为100
                show: true // 设置y轴是否显示
            },
          series:{        //配置项
              
          },
          }
         this.chartInstance.setOption(option);
    }
  }
}

写完以后就可以在配置项里配置你想要的数据啦~

*配置

所有的操作都在option中，需要其他的设置的话，你就可以在echarts中找一个实例比如下面这个：饼图的所有操作也是在option中，打开文档==>配置项手册，在里面找你需要的方法啥的

https://echarts.apache.org/zh/option.html  （echarts的配置文档）