Vue项目

安装webstorm，创建vue项目
https://blog.csdn.net/qq_42443497/article/details/103997852
Vue项目结构介绍
https://blog.csdn.net/lhy2199/article/details/81710673
雷达图介绍
https://echarts.apache.org/zh/option.html#series-radar
折线图

<template>
  <div id="myChart" class="chart" :style="{width: '100%', height: '500px'}"></div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'hello',
    data() {
      return {
        xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // x轴数据，可根据需求
        yAxisData1: [120, 132, 101, 134, 90, 230, 210], // 数据1
        yAxisData2: [220, 182, 191, 234, 290, 330, 310], // 数据2
        yAxisData3: [150, 232, 201, 154, 190, 330, 410], // 数据3
        yAxisData4: [320, 332, 301, 334, 390, 330, 320], // 数据4
        yAxisData5: [820, 932, 901, 934, 1290, 1330, 1320], // 数据5

      }
    },
    mounted() {
      this.loadLine();
    },
    methods: {
      loadLine() {
        let option = {
          title: {
            text: '折线图堆叠'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.xAxisData // x轴数据
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              data: this.yAxisData1 // y轴数据1
            },
            {
              name: '联盟广告',
              type: 'line',
              stack: '总量',
              data: this.yAxisData2 // y轴数据2
            },
            {
              name: '视频广告',
              type: 'line',
              stack: '总量',
              data: this.yAxisData3 // y轴数据3
            },
            {
              name: '直接访问',
              type: 'line',
              stack: '总量',
              data: this.yAxisData4 // y轴数据5
            },
            {
              name: '搜索引擎',
              type: 'line',
              stack: '总量',
              data: this.yAxisData5 // y轴数据5
            }
          ]
        }
        this.myChartOne = echarts.init(document.getElementById('myChart'))
        this.myChartOne.setOption(option)
      },
    }
  }
</script>

雷达图2

<template>
  <div id="main" style="width: 600px;height: 600px;"></div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    name: 'hello',
    mounted() {
      this.$nextTick(function() {
        this.drawPie('main')
      })
    },
    methods: {
      drawPie() {
        var charts = echarts.init(document.getElementById('main'))
        var option = {
          title: {
            text: "基础雷达图"
          },
          tooltip: {},
          legend: {
            data: ["小米", "拉拉"]
          },
          radar: {
            indicator: [{
              name: "语文",
              max: 150
            }, {
              name: "数学",
              max: 150
            }, {
              name: "英语",
              max: 150
            }, {
              name: "化学",
              max: 100
            }, {
              name: "生物",
              max: 100
            }, {
              name: "物理",
              max: 100
            }]
          },
          series: [{
            name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            data: [{
              value: [110, 102, 140, 88, 77, 90],
              name: "小米"
            }, {
              value: [130, 140, 90, 90, 66, 88],
              name: "拉拉"
            }]
          }]
        }
        charts.setOption(option);
      },

    }
  }
</script>