eachars饼图的使用总结对于springboot和vue的总结

eachars的使用总结对于springboot和vue的总结

本人实现2个条件查询来完成图表的功能业务（本人也是小白基本的样式给于官网的配置项来实现）
    <template>
    <div class="box">
    /**用于实现条件查询来生成饼图**/
    <div class="box1">
    <el-form ref="form" :model="form" label-width="80px">
	<el-row>
	<el-col :span="4">
    <el-form-item label="会议名称">
    <el-select v-model="form.meetingId" clearable placeholder="请选择会议名称">
    <el-option
    v-for="item in meetingList"
    :key="item.meetingId"
    :label="item.meetingName"
    :value="item.meetingId"
    @click.native="meetDown(item.meetingId)">
    </el-option>
    </el-select>
    </el-form-item>
    </el-col>
    <el-col :span="3">
    <el-form-item>
    <el-button type="primary" @click="onSubmitMeet" >会议名称</el-button>
    </el-form-item>
    </el-col>
    <el-col :span="5">
    <el-form-item label="会议日期">
    <el-date-picker
    v-model="value1"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    style="width: 300px"
    end-placeholder="结束日期"
    @click.native="datatime">
    </el-date-picker>
    </el-form-item>
    </el-col>
    <el-col :span="4">
    <el-form-item>
    <el-button type="primary" @click="onSubmit" >日期统计</el-button>
    </el-form-item>
    </el-col>
    </el-row>
    </el-form>
    </div>
    /** 主要生成的就是饼图的div**/
    <div id= "sex" class="sex"></div>
   </div>
   </template>
<script>
/** 导入eachars **/
import * as echarts from 'echarts';
/** 样式（可选感觉没啥用） 我是导入的完整配置项**/
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);
/**  导入请求的api **/
import { listMeeting } from '@/api/meeting/meeting'
import { getMeetingLike, getTimeList, listGetEchars, listIssues } from '@/api/issues/issues'
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.2",
      // 存放议题统计数据查询数据渲染图表
      meetList:[],
      //存放metingList数据获取会议下拉框数据
      meetingList:[],
      //存放选中的条件的id
      meetingId:'',
      map:{},
      arr:[],
      form:{},
  },
  mounted() {
    /** 图表初始化的时候数据并没有显示渲染出来这里是实现异步的数据获取 **/
    /** 设置定时器 **/ 
    var times=  setTimeout(() => {
    /** 调自己封装的图表函数来获取自己后端查询的数据来替换图表的data:[]存储数据的信息
   看这个代码 : data:val,饼图的为数组
    **/
      this.getpa(this.meetList);
    }, 1000)
  },
  /**  页面渲染之前完成异步数据的请求调用 **/
  created() {
  /** 获取初始数据 **/
    this.getList();
  },
  methods: {
    // 获取条件的日期数据
    datatime(){
      console.log(this.value1[0],"日期")
      console.log( this.value1[1],"日期")
    },
      /** 用来实现在模板渲染成html前调用 **/
    getList() {
      /** 查询议题管理 **/
      listGetEchars().then(res => {
      /** 获取接口数据 **/
      this.meetList = res;
      console.log(this.meetList,"会议议题数据")
        /**  封装图表所需的数据[{name:'' value:''}] **/
        },
      );
      listIssues().then(res=>{
        console.log(res,"获取会议id数据")
        this.meetingList=res.rows;
        /** 条件去重 **/
        const removeDuplicateObj = (arr) => {
          let obj = {};
          this.meetingList = this.meetingList.reduce((newArr, next) => {
            obj[next.meetingId] ? "" : (obj[next.meetingId] = true && newArr.push(next));
            return newArr;
          }, []);
          return  this.meetingList;
        };
        console.log(removeDuplicateObj( this.meetingList ));
      })
    },
    /** 监听条件查询选中的值来进行业务查询 **/
    meetDown(meetingId){
      console.log( meetingId,"监听optios的值")
      /** 监听到的id赋值来实现用于你要完成的条件查询 **/
      this.meetingId=meetingId;
    },
    /** 条件查询按钮  点击会议名称按钮查询出对应的数据**/
    onSubmitMeet(){
      if(this.form.meetingId !== undefined&&this.form.meetingId!==""){
        console.log(this.form.meetingId,"ok")
        console.log(this.value1,"ok")
        getMeetingLike(this.meetingId).then(res=>{
          console.log(res,"获取查询的会议统计数据")
         var arr=[];
          arr.push(res)
          /** 1.这个很关键
              2.应为图表页面加载就渲染了后期就算你直接赋值
              给图表函数的数据项也不能重新加载出数据他是空数组  （他一般会提示demo节点已存在）              
              3.得使用下面的操作
           **/
           /** 获取节点  **/
          let map = echarts.init(document.getElementById('sex'));
          let option = map.getOption() // 获取option数据
          option.series[0].data= arr // 找到data修改数据
          map.setOption(option, true) // 重新渲染
        });
      }
      else{
        /** 查询议题管理 **/
        listGetEchars().then(res => {
          console.log(this.meetList,"会议议题数据else")
          let map = echarts.init(document.getElementById('sex'));
          let option = map.getOption() // 获取option数据
          option.series[0].data= res// 找到data修改数据
          map.setOption(option, true) // 重新渲染
        });
      }
    },
    onSubmit(){
      if (this.value1!==null&&this.value1.length!==0)
      {
        console.log(this.form.meetingId,"ok")
        console.log(this.value1,"ok")
        console.log(this.form.meetingId,'ok')
        /**  个人写法通过获取2个时间段来传入后端进行查询条件 **/
        const   params={
          createTime: this.value1[0],
          updateTime: this.value1[1]
        }
        getTimeList(params).then(res=>{
          let map = echarts.init(document.getElementById('sex'));
          let option = map.getOption() // 获取option数据
          option.series[0].data= res // 找到data修改数据
          map.setOption(option, true) // 重新渲染
          console.log(res,"日期格式")
        })
      }
      else{
        /** 查询议题管理如果2个条件为空则渲染初始化的那个数据 **/
        listGetEchars().then(res => {
          console.log(this.meetList,"会议议题数据else")
          let map = echarts.init(document.getElementById('sex'));
          let option = map.getOption() // 获取option数据
          option.series[0].data= res// 找到data修改数据
          map.setOption(option, true) // 重新渲染
        });
      }
    },
    getpa(val){
      //sex 饼图（本人参考官网）
      console.log(this.meetList,"111555")
      /**  获取节点来生成图表 **/
       var chartDom = document.getElementById('sex');
      /** 初始化图表 **/
      var myChart = echarts.init(chartDom,null,
        /** 设置饼图大小  **/
        {
          top: 0,
          width: 2000,
          height: 1000,
          left:0
        }
      );
      /** 响应容器大小的变化监听容器大小的变化，图标也改变  **/
      window.addEventListener('resize', function() {
        myChart.resize();
      });
      var option;
      option = {
        title: {
          right: 'center',
          textStyle:{
            color:'#FFFFFF',
            fontSize:20
      }
          },
        /**  饼图提示框的样式 **/
        tooltip: {
          /** 遍历数组获取到图标name **/
          trigger: 'item',
          /** 图标提示显示的格式 **/
          formatter:'{b}:({d}%)',
          /** 图标提示文字的字体大小 **/
          textStyle: {
            fontSize: 30
          },
        },
        /** 图例 **/
        legend: {
          orient: 'vertical',
          left: 0,
          /** 图例的间隔 **/
          itemGap:30,
          /** 距离容器的头部距离 **/
          top:'30%',
          /** 图例的图形宽度 **/
          itemWidth:'100',
          /**  文字在图例前后的显示位置 **/
          align:'right',
          /** 图例的图形高度 **/
          itemHeight:'40',
          textStyle: {
            /** 图例字体大小 **/
            fontSize: 20,
          },

        },
        series: [

          {
            /** 定义园  **/
            type: 'pie',
            /** 定义自己的调色盘实现系统自动选择颜色  **/
            color: [
              '#c23531',
              '#2f4554',
              '#61a0a8',
              '#d48265',
              '#91c7ae',
              '#749f83',
              '#ca8622',
              '#bda29a',
              '#6e7074',
              '#546570',
              '#c4ccd3'
            ],
            /** 定义饼图的半径
             * number：直接指定外半径值。
             * string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。
             * Array.<number|string>：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。
             * 可以将内半径设大显示成圆环图
             * **/
            radius: '60%',
           /**  渲染后端数据生成图标 参数数组，对象{ name：value} **/
           data:val,

            emphasis: {
              /**  数据提示显示的格式 **/
              formatter:'{b}:{c}个:({d}%)',
              selectorLabel:{
                fontSize:100
              },
              /** 是否开启高亮后扇区的放大效果。  **/
              scale:true,
              /**  高亮后扇区的放大尺寸，在开启 emphasis.scale 后有效。 **/
              scaleSize:20,
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                color:'blue',

              },
              z: 2,
              legendHoverLink: true,
              label:{
               show:true
              },

            },
            /** 导航线的字体大小 **/
            label:{
              fontSize:20,
              formatter:'{b}:\n{c}个:({d}%)',
            },
            labelLine:{
              /** 是否显示视觉引导线 **/
              show: true,
              /**  引导线的长度视觉引导线第一段的长度 **/
              length: 40,
              /**  延长线的长度视觉引导项第二段的长度**/
              length2: 100,
              /**  是否平滑视觉引导线，默认不平滑 **/
              smooth: false,
              /** 通过调整第二段线的长度，限制引导线两端之间最小的夹角，以防止过小的夹角导致显示不美观。 **/
              minTurnAngle: 90,
              /** 通过调整第二段线的长度，限制引导线与扇区法线的最大夹角。设置为小于 90 度的值保证引导线不会和扇区交叉。 **/
              maxSurfaceAngle: 90,
              /**  线条的颜色  **/
              lineStyle:{
                /**  线条的宽度 **/
                width: 6,
                /**  线的类型 **/
                type:  'solid'
              }
            },

          }
        ]
      };





      option && myChart.setOption(option);

    }
  },

};
</script>

<style scoped>

.box{
  width: 3000px;
  height: 2000px;
}
.box1{
  margin: 50px 0;
  height: 100px;
  width: 2500px;
  padding: 0 0 0 680px;
}
.sex{
  position: absolute;
  left: 10%;
  top: 150px;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 40px;
  margin: 0;
  border-width: 0px;
}
.clearfix{
  width: 100px;
  height: 100px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}


.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
  height: 30%;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
#main,
html,
body {
  width: 100%;
}
#main {
  height: 400px;
}

</style>