echarts初体验————制作柱状图和饼图

今天开发涉及到了图形，特意去看了下相关文档，实现了柱状图和饼图。

柱状图样式（点击上面的蓝绿黄可以选择是否显示这个记录）

代码：vue前端

<template>   
  </div> 
    <el-row>
      <el-col :span="12">
        <el-card >
            //柱状图
          <div class="echart" id="mychart" :style="myChartStyle"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
            //饼状图
        <el-card>
          <div style="height: 240px" ref="videoEcharts"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import * as echarts from 'echarts' //引用echarts

export default {
  data() {
    return {
      //柱状图，这里使用了三个纵坐标数据
      xData: [], //横坐标
      yData: [], //纵坐标数据
      taskDate: [], //纵坐标数据
      alpayData: [], //纵坐标数据
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式

      //饼状图 数据
      videoData: [
        {
          name: '华为',
          value: 2999
        },
        {
          name: '苹果',
          value: 5999
        },
        {
          name: '红米',
          value: 1500
        },
        {
          name: '小米',
          value: 1999
        },
        {
          name: 'oppo',
          value: 2200
        },
        {
          name: 'vivo',
          value: 4500
        }
      ],
    };
  },
mounted() {
    this.$nextTick(() => {
      this.initEcharts();
    });
  },
methods: {
//echarts图形
    initEcharts() {
      getEcharts(this.queryParams.examInfoId).then(response =>{
        this.xData = response.positionNameList;
        this.yData = response.signUpNumList;
        this.taskDate = response.predictionNumList;
        this.alpayData = response.alpayNumList;
        // this.videoData = this.xData.map((name,index) => ({name, value: this.taskDate[index]}));    //这里是将两个数组转合并成一个数组，用作饼状图的数据
        // 多列柱状图
        const mulColumnZZTData = {
            //graphic 这块用于无数据时显示“暂无数据”
          graphic: {
            type: 'text',
            left: 'center',
            top: 'middle',
            silent: true,
            invisible: this.xData.length != 0, //这里取反才可见提示信息，我也没太理解
            style: {
              fill: 'black',
              fontWeight: 'bold',
              text: '暂无数据',
              fontSize: '26px'
            }
          },

          xAxis: {
            data: this.xData
          },
          // 图例
          legend: {
            data: ["报名人数", "招收人数","缴费人数"],
            top: "0%"    //显示在最顶部
          },
          yAxis: {},
           //数据
          series: [
            {
              type: "bar", //形状为柱状图
              data: this.yData,
              name: "报名人数", // legend属性
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                show: true,
                position: "top"
              }
            },
            {
              type: "bar", //形状为柱状图
              data: this.taskDate,
              name: "招收人数", // legend属性
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                show: true,
                position: "top"
              }
            },
            {
              type: "bar", //形状为柱状图
              data: this.alpayData,
              name: "缴费人数", // legend属性
              label: {
                // 柱状图上方文本标签，默认展示数值信息
                show: true,
                position: "top"
              }
            }
          ]
        };
        const myChart = echarts.init(document.getElementById("mychart"));
        myChart.setOption(mulColumnZZTData);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });

        //饼状图
        const option = {
          backgroundColor: '#fff',
        // 图例的配置，具体包括是否显示、位置、文本样式等。这里设置为不显示。
          legend: {
            show: false,
            orient: 'vertical',
            top: '0',
            right: '0',
            textStyle: {
              color: '#666666',
              fontWeight: 'normal'
            }
          },
        //提示框的配置，具体包括触发方式、显示内容的格式等。这里设置为饼图中每个扇形的名称（{b}）、值（{c}）和占比（{d}%）。
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
        //饼图的系列数据，包含两个系列对象，对应两个饼图。每个系列对象中包括了类型（type）、半径（radius）、标签（label）、标签线（labelLine）、数据（data）等配置。
          series: [
            {
              type: 'pie',
              selectedMode: false,    // 是否启用选中模式，默认为不启用。
              radius: '80%',        //饼图的半径大小为80%。
              color: ['#a814ff', '#1483FF', '#c7dcde', '#dc110b', '#66DE69','#E8810BFF','#0BE8A6FF','#DC110BFF'],    //每个扇形的颜色数组。
             
              label: {    //标签的配置，具体包括显示位置、样式和格式等。这里设置为在饼图内部显示百分比。
                normal: {
                  show: true,
                  position: 'inside',
                  textStyle: {
                    fontSize: '14',
                    color: '#000',
                  },
                  formatter: '{d}%',
                  rich: {
                    fonts: {
                      color: '#FFFFFF',
                      fontSize: '12'
                    }
                  }
                }
              },
            //标签引导线的配置，具体包括是否显示和长度等。这里设置为不显示。
              labelLine: {
                normal: {
                  show: false,
                  length: 5
                }
              },
              data: this.videoData,
            },
            {
              type: 'pie',
              radius: '80%',
              label: {
                normal: {
                  position: 'outside',
                  formatter: function (params) {
                    return '{name|' + params.name + '}\n{value|' + params.value + ' 件}'
                  },
                  textStyle: {
                    fontSize: '12'
                  },
                  rich: {
                    name: {
                      fontSize: 18,
                      fontWeight: 'bold',
                      padding: [0, 5, 0, 10],
                      color: '#7e00fe',
                    },
                    percent: {
                      color: '#000',
                      padding: [0, 5, 0, 0],
                    },
                    value: {
                      fontSize: 18,
                      padding: [5, 5, 0, 10],
                      color: '#000',
                    },
                  },
                }
              },
              labelLine: {
                normal: {
                  show: true,
                  length: 5
                }
              },
              data: this.videoData,
              silent: true    //是否将该系列的鼠标事件置为静态，即不触发交互，默认为 true。
            }
          ]
        }
        const myEchartsVideo = echarts.init(this.$refs.videoEcharts)
        myEchartsVideo.setOption(option)

      });
    }
  },
}

前台可能出现的问题：

解决：将const myChart = echarts.init(document.getElementById("mychart"));中的echarts.init方法改成this.$refs.mychart 即可解决。

后端返回数据：

controller层：返回的是一个map集合

service实现类：