2020-01-03 12:51:44 版本 : echarts 使用示例
作者: 陈婉 于 2020年01月03日 发布在分类 / 人防组 / 人防前端 下,并于 2020年01月03日 编辑
 历史版本
修改日期 修改人 备注
2020-01-07 08:49:19[当前版本] 陈婉 格式调整
2020-01-03 12:52:42 陈婉 格式调整
2020-01-03 12:51:44 陈婉 创建版本

可单独使用echarts组件

示例—（组件名+数据）

<LiquidFillChart style="height:170px;" :info="data1"></LiquidFillChart>

数据—（使用该组件需要传递的参数） 


   
 
    
	
	
    
  
  1.   data1:{ 
    2. 

	
    
  
  2.   showLabel:true, 
    3. 

	
    
  
  3.   data:[0.6, 0.5, 0.4, 0.3], 
    4. 

	
    
  
  4.   color:["#0a69b6"], 
    5. 

	
    
  
  5.   bgColor:"rgba(255,255,255,0)" 
    6. 

	
    
  
  6.  }, 
    7.

当一个页面有很多echarts图表时，可以使用动态组件进行循环

代码示例 

    <li class="li" :class="index ===0 ||index ===2  ? 'li5' : ''" v-for="(item,index) in dataList" :key="index">
        <h3>{{item.title}}</h3>
        <DatePicker v-if="item.isSelect" type="year" v-model="searchList[index].yearData" placeholder="请选择年份" style="width: 200px" @on-change="changeYear(index,$event)"></DatePicker>
        <component :is="item.component" class="echarts" :info="item.data"></component>
     </li>

Data

属性 数据类型 描述
searchList Array 筛选条件
dataList Array 循环数据
dataList统一数据格式

属性 数据类型 描述
title String 统计标题
component String 使用的组件名称
isSelect Boolean 是否显示筛选条件
data Object 图表参数 
dataList: [
            {//报警处理情况所占比
			  title: "报警处理情况所占比",
			  component: 'RingsChart2',
			  isSelect: true,
			  data: {
				seriesData: [
				  {
					name: "处理情况",
					data: []
				  },
				  {
					name: "报警来源",
					data: []
				  },
				]

			  }
			},
          ],

methods

方法名称 描述
changeYear 选择年份触发时调用，带有筛选条件的统计图表的数据获取写在此处
getNowYear 获取当前年，带有筛选条件时，默认是当年
initDate 初始化数据，根据dataList中的数据的isSelect属性，初始化searchList数据
代码示例 

 /**
         * 选择年份
         */
        changeYear(index, eventArg) {
          let param = {
            year: eventArg
          };
          const _this = this;
          switch (index) {
            //报警来源统计
            case 0:
              _this.$api.AlarmAnalysis.GetAlarmSource(param).then(res => {
                if (res.data.success) {
                  _this.dataList[index].data.xAxisData = res.data.result.alarmMonthData;
                  _this.dataList[index].data.legendData = res.data.result.typeNameData;
                  _this.dataList[index].data.seriesData.forEach((e, index0) => {
                    e.data = res.data.result.alarmData[index0];
                  })
                }
              });
              break;
            //报警处理情况所占比
            case 1:
              _this.$api.AlarmAnalysis.GetAlarmContent(param).then(res => {
                if (res.data.success) {
                  _this.dataList[index].data.seriesData[0].data = res.data.result[1];
                  _this.dataList[index].data.seriesData[1].data = res.data.result[0];
                }
              });
              break;
            //报警数量统计
            case 2:
              _this.$api.AlarmAnalysis.GetAlarmCount(param).then(res => {
                if (res.data.success) {
                  _this.dataList[index].data.xAxisData = res.data.result.xData;
                  _this.dataList[index].data.seriesData.forEach((e, index0) => {
                    e.name = res.data.result.arrayDatas[index0].name
                    e.data = res.data.result.arrayDatas[index0].data
                  })
                }
              });
              break;
          }
    
        },
        /**
         * 获取当年
         */
        getNowYear() {
          let date = new Date();
          return `${date.getFullYear()}`;
        },
        /**
         * 初始化数据
         */
        initDate() {
          this.dataList.forEach(e => {
            if (e.isSelect) {
              this.searchList.push({ yearData: this.getNowYear() })
            }
          });
          if (this.searchList.length > 0) {
            this.searchList.forEach((e, index) => {
              this.changeYear(index, e.yearData)
            })
          }
        }

mounted

页面加载时，初始化数据
如果有统计图表没有筛选条件也可将获取数据的代码写在initData方法中

历史版本-目录  [回到顶端]
    知识分享平台 -V 4.8.7 -wcp