1、引入echarts

cmd下载 echarts.js

npm install echarts -S

全局引入main.js

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

2、需要的页面引入echartPages.js

 import echarts from "../../../static/js/echarts.min";
 //或者
let echarts = require('../../../static/js/echarts.min');

3、发现echart并没有按照百分比适应屏幕，其原因echart是执行太快，css的100%还没来得及反应，js就已经执行完了，所以把百分比转成像素单位，其解决方法是延迟echart的初始化

  setTimeout(()=>{
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

    var dataNum = [
      1.5,
      1.5,
      3.5,
      4.5,
      6.5,
      1.5,
      0.5,
      1.5,
      3,
      4.5,
      1.1,
      1.7,
      1.5,
      8.5,
      1.5,
      1.8,
      1.5,
      1.4,
      3.1,
      4.5,
      1.3,
      1.5,
      1.5,
      1.5,
      0.5,
      1.2,
      1.5,
      1.5,
      3,
      4.5,
    ];
    var dataTime = [
      "3-01",
      "3-02",
      "3-03",
      "3-04",
      "3-05",
      "3-09",
      "3-10",
      "3-11",
      "3-12",
      "3-13",
      "3-14",
      "3-15",
      "3-16",
      "3-17",
      "3-18",
      "3-19",
      "3-20",
      "3-21",
      "3-22",
      "3-23",
      "3-24",
      "3-25",
      "3-26",
      "3-27",
      "3-28",
      "3-29",
      "3-30",
      "3-31",
    ];
    var sum = 0;

    dataNum.forEach((item) => {
      sum = sum + item;
    });
    // console.log(sum) // 100

    $(".mui-linear-right span").html(sum);

    // 指定图表的配置项和数据
    var option = {
      xAxis: {
        axisTick: {
          show: false, //不显示坐标轴刻度线
        },
        axisLine: {
          show: false, //不显示坐标轴线
        },
        type: "category",
        data: dataTime,
        color: "#8e8e93",
      },
      yAxis: {
        type: "value",
        show: false,
        minInterval: 1, //分割刻度以1为单位
        splitLine: {
          show: false, //不显示网格线
        },
      },
      series: [
        {
          data: dataNum,
          type: "line",
          color: "#0e9cff",
          barCategoryGap:'60%',//雷达图宽度比例
          label: {
            show: true, // 显示数值
            textStyle: {
              // 文字样式
              color: "#8e8e93",
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },2000)