测试

src/api/portal/figure/figure.js

@@ -0,0 +1,66 @@
+import request from '@/utils/request'
+
+// 查询指标权重明细所有列表
+export function normFeelistAll() {
+  return request({
+    url: '/normFee/listAll',
+    method: 'get',
+  })
+}
+
+// 查询保税区所有列表
+export function bondedList() {
+  return request({
+    url: '/system/dept/cb/list',
+    method: 'get',
+  })
+}
+
+// 获取得分占比数据
+export function getDFZB(data) {
+  return request({
+    url: '/figure/getDFZB',
+    method: 'post',
+    data: data
+  })
+}
+// 获取得分总量数据
+export function getDFZL(data) {
+  return request({
+    url: '/figure/getDFZL',
+    method: 'post',
+    data: data
+  })
+}
+// 获取同期数据对比数据
+export function getTQSJ(data) {
+  return request({
+    url: '/figure/getTQSJ',
+    method: 'post',
+    data: data
+  })
+}
+// 获取指标参数排名数据
+export function getZBCS(data) {
+  return request({
+    url: '/figure/getZBCS',
+    method: 'post',
+    data: data
+  })
+}
+// 获取指标分数值数据
+export function getZBFS(data) {
+  return request({
+    url: '/figure/getZBFS',
+    method: 'post',
+    data: data
+  })
+}
+// 获取指标总量数据
+export function getZBZL(data) {
+  return request({
+    url: '/figure/getZBZL',
+    method: 'post',
+    data: data
+  })
+}

src/views/DFZB/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="app-container">
+    
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      
+      <el-form-item label="保税区">
+        <el-select v-model="queryParams.cbIdArr" multiple placeholder="请选择保税区">
+          <el-option
+            v-for="item in regionList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <!-- <el-form-item label="指标名称">
+        <el-select v-model="queryParams.normFeeId" placeholder="请选择指标名称">
+          <el-option
+            v-for="item in normFeelistAll"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item>
+
+      <el-form-item label="时间类型">
+
+        <el-select v-model="queryParams.dateType" placeholder="请选择" clearable filterable class="se" @change="selectChange">
+          <el-option v-for="t in datelist" :key="t.value" :label="t.label" :value="t.value" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 1" v-model="queryParams.dateValue" placeholder="选择月" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in 12" :key="t.value" :label="t + '月'" :value="t" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 2" v-model="queryParams.dateValue" placeholder="选择季度" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in jdlist" :key="t.value" :label="t.label" :value="t.value"/>
+        </el-select>
+
+        <el-date-picker v-if="queryParams.dateType == 3" v-model="queryParams.dateValue" type="year" placeholder="选择年" value-format="yyyy" format="yyyy 年" style="margin-left: 10px;"></el-date-picker>
+
+      </el-form-item> -->
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+
+      <!-- <el-form-item label="图形类型">
+        <el-select v-model="contentType" placeholder="请选择图形类型">
+          <el-option
+            v-for="item in contentTypelist"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item> -->
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+<!-- 
+    <el-table :data="dataList" height="500px">
+      <el-table-column label="保税区" align="center" prop="cbName">
+        <template slot-scope="scope">
+          {{ scope.row.cbName }}
+        </template> 
+      </el-table-column>
+    </el-table> -->
+
+    <circle-chart v-for="(item,index) in dataList" :key="index" :title="item.cbName" :chartData="item.datailList"  style="width: 100%;margin-top: 20px;"></circle-chart>
+
+  </div>
+</template>
+
+<script>
+import { getDFZB,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
+import circleChart from '../dashboard/circleChart.vue';
+export default {
+  name: 'DFZB',
+  components:{
+    circleChart
+  },
+  data() {
+    return {
+      categoryChartData: {},
+      contentType:'1',
+      contentTypelist:[
+        { label: '列表', value: '1' },
+        { label: '柱状图', value: '2' },
+        { label: '雷达图', value: '3' },
+      ],
+      datelist:[
+        { label: '月', value: '1' },
+        { label: '季度', value: '2' },
+        { label: '年', value: '3' },
+      ],
+      jdlist:[
+        { label: '第一季度', value: '1' },
+        { label: '第二季度', value: '2' },
+        { label: '第三季度', value: '3' },
+        { label: '第四季度', value: '4' },
+      ],
+      dialogVisible: false,
+      fileList: [],
+      // 根路径
+      baseURL: process.env.VUE_APP_BASE_API,
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 系统管理表格数据
+      dataList: [],
+      // 查询参数
+      queryParams: {
+        cbIdArr:[],  //保税区id集合
+        dateType:'',  //查询时间类型(1=月，2=季度，3=年)
+        dateValue:'', //查询时间值
+        normFeeId:'',  //指标明细id
+      },
+      normFeelistAll:[],  //指标列表
+      regionList:[],  //保税区列表
+      timeValue:[],
+    };
+  },
+  created() {
+    this.bondedList()
+    this.getNormFeelistAll()
+  },
+  methods: {
+    selectChange(val){
+      this.queryParams.dateValue = ''
+    },
+    getList() {
+      this.timeValue = []
+      this.loading = true;
+      getDFZB(this.queryParams).then(response => {
+        this.dataList = []
+        this.dataList = response.data
+        this.loading = false;
+      });
+    },
+    bondedList(){
+      this.regionList = []
+      bondedList().then(res=>{
+        for (const i in res.data) {
+          this.regionList.push({ 
+            label:res.data[i].deptName,
+            value:res.data[i].deptId,
+           })
+          
+        }
+        // this.queryParams.cbIdArr.push(res.data[0].deptId)
+        this.getList();
+      })
+    },
+    getNormFeelistAll(){
+      this.normFeelistAll = []
+      normFeelistAll().then(res=>{
+        for (const i in res.data) {
+          this.normFeelistAll.push({ 
+            label:res.data[i].fname,
+            value:res.data[i].id,
+           })
+        }
+        
+      })
+    },
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.cbIdArr = [];
+      this.queryParams.dateType = '';
+      this.queryParams.dateValue = '';
+      this.queryParams.normFeeId = '';
+      this.resetForm('queryForm');
+    },
+  }
+};
+</script>

src/views/DFZL/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="app-container">
+    
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      
+      <el-form-item label="保税区">
+        <el-select v-model="queryParams.cbIdArr" multiple placeholder="请选择保税区">
+          <el-option
+            v-for="item in regionList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="指标名称">
+        <el-select v-model="queryParams.normFeeId" placeholder="请选择指标名称">
+          <el-option
+            v-for="item in normFeelistAll"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item>
+
+      <el-form-item label="时间类型">
+
+        <el-select v-model="queryParams.dateType" placeholder="请选择" clearable filterable class="se" @change="selectChange">
+          <el-option v-for="t in datelist" :key="t.value" :label="t.label" :value="t.value" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 1" v-model="queryParams.dateValue" placeholder="选择月" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in 12" :key="t.value" :label="t + '月'" :value="t" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 2" v-model="queryParams.dateValue" placeholder="选择季度" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in jdlist" :key="t.value" :label="t.label" :value="t.value"/>
+        </el-select>
+
+        <el-date-picker v-if="queryParams.dateType == 3" v-model="queryParams.dateValue" type="year" placeholder="选择年" value-format="yyyy" format="yyyy 年" style="margin-left: 10px;"></el-date-picker>
+
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+
+      <!-- <el-form-item label="图形类型">
+        <el-select v-model="contentType" placeholder="请选择图形类型">
+          <el-option
+            v-for="item in contentTypelist"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item> -->
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table :data="dataList" height="500px">
+      <el-table-column label="保税区" align="center" prop="cbName">
+        <template slot-scope="scope">
+          {{ scope.row.cbName }}
+        </template> 
+      </el-table-column>
+      <el-table-column label="指标名称" align="center" prop="colName">
+        <template slot-scope="scope">
+          {{ scope.row.colName }}
+        </template>
+      </el-table-column>
+
+      <!-- <el-table-column  v-for="item in datails" :key="Math.random()"  :label="item[0].timeValue" align="center" prop="colName">
+        <template slot="header" slot-scope="scope">
+          {{ scope.row.$index }}
+        </template>
+          <el-table-column label="对比值" align="center" prop="colName">
+            <template slot-scope="scope">
+              1
+            </template>
+          </el-table-column>
+          <el-table-column label="当前" align="center" prop="colName">
+            <template slot-scope="scope">
+              2
+            </template>
+          </el-table-column>
+          <el-table-column label="浮动" align="center" prop="colName">
+            <template slot-scope="scope">
+             3
+            </template>
+          </el-table-column>
+      </el-table-column> -->
+          
+
+     <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '1' || queryParams.dateType == ''">
+        <template slot="header" slot-scope="scope">
+          {{ timeValue[0]?timeValue[0]:'月份' }}
+        </template>
+          <el-table-column label="对比值" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[0].oldValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="当前" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[0].nowValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="浮动" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[0].redio }}
+          </template>
+        </el-table-column>
+      </el-table-column> 
+
+       <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '2' || queryParams.dateType == ''">
+        <template slot="header" slot-scope="scope">
+          {{ timeValue[1]?timeValue[1] + '季度':'季度' }}
+        </template>
+        <el-table-column label="对比值" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[1].oldValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="当前" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[1].nowValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="浮动" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[1].redio }}
+          </template>
+        </el-table-column>
+      </el-table-column>
+
+      <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '3' || queryParams.dateType == ''">
+        <template slot="header" slot-scope="scope">
+          {{ timeValue[2]?timeValue[2] + '年度':'年度' }}
+        </template>
+        <el-table-column label="对比值" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[2].oldValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="当前" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[2].nowValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="浮动" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[2].redio }}
+          </template>
+        </el-table-column>
+      </el-table-column> 
+
+    </el-table>
+
+  </div>
+</template>
+
+<script>
+import { getDFZL,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
+export default {
+  name: 'DFZL',
+  data() {
+    return {
+      categoryChartData: {},
+      contentType:'1',
+      contentTypelist:[
+        { label: '列表', value: '1' },
+        { label: '柱状图', value: '2' },
+        { label: '雷达图', value: '3' },
+      ],
+      datelist:[
+        { label: '月', value: '1' },
+        { label: '季度', value: '2' },
+        { label: '年', value: '3' },
+      ],
+      jdlist:[
+        { label: '第一季度', value: '1' },
+        { label: '第二季度', value: '2' },
+        { label: '第三季度', value: '3' },
+        { label: '第四季度', value: '4' },
+      ],
+      dialogVisible: false,
+      fileList: [],
+      // 根路径
+      baseURL: process.env.VUE_APP_BASE_API,
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 系统管理表格数据
+      dataList: [],
+      // 查询参数
+      queryParams: {
+        cbIdArr:[],  //保税区id集合
+        dateType:'',  //查询时间类型(1=月，2=季度，3=年)
+        dateValue:'', //查询时间值
+        normFeeId:'',  //指标明细id
+      },
+      normFeelistAll:[],  //指标列表
+      regionList:[],  //保税区列表
+      timeValue:[],
+    };
+  },
+  created() {
+    this.bondedList()
+    this.getNormFeelistAll()
+  },
+  methods: {
+    selectChange(val){
+      this.queryParams.dateValue = ''
+    },
+    getList() {
+      this.timeValue = []
+      this.loading = true;
+      getDFZL(this.queryParams).then(response => {
+        this.dataList = []
+        this.dataList = response.data;
+        for (const i in this.dataList[0].datails) {
+          this.timeValue.push(this.dataList[0].datails[i].timeValue)
+        }
+        this.loading = false;
+      });
+    },
+    bondedList(){
+      this.regionList = []
+      bondedList().then(res=>{
+        for (const i in res.data) {
+          this.regionList.push({ 
+            label:res.data[i].deptName,
+            value:res.data[i].deptId,
+           })
+        }
+      })
+    },
+    getNormFeelistAll(){
+      this.normFeelistAll = []
+      normFeelistAll().then(res=>{
+        for (const i in res.data) {
+          this.normFeelistAll.push({ 
+            label:res.data[i].fname,
+            value:res.data[i].id,
+           })
+        }
+        this.getList();
+      })
+    },
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.cbIdArr = [];
+      this.queryParams.dateType = '';
+      this.queryParams.dateValue = '';
+      this.queryParams.normFeeId = '';
+      this.resetForm('queryForm');
+    },
+  }
+};
+</script>

src/views/TQSJ/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="app-container">
+    
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      
+      <el-form-item label="保税区">
+        <el-select v-model="queryParams.cbIdArr" multiple placeholder="请选择保税区">
+          <el-option
+            v-for="item in regionList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="指标名称">
+        <el-select v-model="queryParams.normFeeId" placeholder="请选择指标名称">
+          <el-option
+            v-for="item in normFeelistAll"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item>
+
+      <el-form-item label="时间类型">
+
+        <el-select v-model="queryParams.dateType" placeholder="请选择" clearable filterable class="se" @change="selectChange">
+          <el-option v-for="t in datelist" :key="t.value" :label="t.label" :value="t.value" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 1" v-model="queryParams.dateValue" placeholder="选择月" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in 12" :key="t.value" :label="t + '月'" :value="t" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 2" v-model="queryParams.dateValue" placeholder="选择季度" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in jdlist" :key="t.value" :label="t.label" :value="t.value"/>
+        </el-select>
+
+        <el-date-picker v-if="queryParams.dateType == 3" v-model="queryParams.dateValue" type="year" placeholder="选择年" value-format="yyyy" format="yyyy 年" style="margin-left: 10px;"></el-date-picker>
+
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+
+      <!-- <el-form-item label="图形类型">
+        <el-select v-model="contentType" placeholder="请选择图形类型">
+          <el-option
+            v-for="item in contentTypelist"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item> -->
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table :data="dataList" height="500px">
+      <el-table-column label="保税区" align="center" prop="cbName">
+        <template slot-scope="scope">
+          {{ scope.row.cbName }}
+        </template> 
+      </el-table-column>
+      <el-table-column label="指标名称" align="center" prop="colName">
+        <template slot-scope="scope">
+          {{ scope.row.colName }}
+        </template>
+      </el-table-column>
+
+      <!-- <el-table-column  v-for="item in datails" :key="Math.random()"  :label="item[0].timeValue" align="center" prop="colName">
+        <template slot="header" slot-scope="scope">
+          {{ scope.row.$index }}
+        </template>
+          <el-table-column label="对比值" align="center" prop="colName">
+            <template slot-scope="scope">
+              1
+            </template>
+          </el-table-column>
+          <el-table-column label="当前" align="center" prop="colName">
+            <template slot-scope="scope">
+              2
+            </template>
+          </el-table-column>
+          <el-table-column label="浮动" align="center" prop="colName">
+            <template slot-scope="scope">
+             3
+            </template>
+          </el-table-column>
+      </el-table-column> -->
+          
+
+     <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '1' || queryParams.dateType == ''">
+        <template slot="header" slot-scope="scope">
+          {{ timeValue[0]?timeValue[0]:'月份' }}
+        </template>
+          <el-table-column label="对比值" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[0].oldValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="当前" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[0].nowValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="浮动" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[0].redio }}
+          </template>
+        </el-table-column>
+      </el-table-column> 
+
+       <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '2' || queryParams.dateType == ''">
+        <template slot="header" slot-scope="scope">
+          {{ timeValue[1]?timeValue[1] + '季度':'季度' }}
+        </template>
+        <el-table-column label="对比值" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[1].oldValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="当前" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[1].nowValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="浮动" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[1].redio }}
+          </template>
+        </el-table-column>
+      </el-table-column>
+
+      <el-table-column align="center" prop="colName" v-if="queryParams.dateType == '3' || queryParams.dateType == ''">
+        <template slot="header" slot-scope="scope">
+          {{ timeValue[2]?timeValue[2] + '年度':'年度' }}
+        </template>
+        <el-table-column label="对比值" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[2].oldValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="当前" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[2].nowValue }}
+          </template>
+        </el-table-column>
+        <el-table-column label="浮动" align="center" prop="colName">
+          <template slot-scope="scope">
+            {{ scope.row.datails[2].redio }}
+          </template>
+        </el-table-column>
+      </el-table-column> 
+
+    </el-table>
+
+  </div>
+</template>
+
+<script>
+import { getTQSJ,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
+export default {
+  name: 'TQSJ',
+  data() {
+    return {
+      categoryChartData: {},
+      contentType:'1',
+      contentTypelist:[
+        { label: '列表', value: '1' },
+        { label: '柱状图', value: '2' },
+        { label: '雷达图', value: '3' },
+      ],
+      datelist:[
+        { label: '月', value: '1' },
+        { label: '季度', value: '2' },
+        { label: '年', value: '3' },
+      ],
+      jdlist:[
+        { label: '第一季度', value: '1' },
+        { label: '第二季度', value: '2' },
+        { label: '第三季度', value: '3' },
+        { label: '第四季度', value: '4' },
+      ],
+      dialogVisible: false,
+      fileList: [],
+      // 根路径
+      baseURL: process.env.VUE_APP_BASE_API,
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 系统管理表格数据
+      dataList: [],
+      // 查询参数
+      queryParams: {
+        cbIdArr:[],  //保税区id集合
+        dateType:'',  //查询时间类型(1=月，2=季度，3=年)
+        dateValue:'', //查询时间值
+        normFeeId:'',  //指标明细id
+      },
+      normFeelistAll:[],  //指标列表
+      regionList:[],  //保税区列表
+      timeValue:[],
+    };
+  },
+  created() {
+    this.bondedList()
+    this.getNormFeelistAll()
+  },
+  methods: {
+    selectChange(val){
+      this.queryParams.dateValue = ''
+    },
+    getList() {
+      this.timeValue = []
+      this.loading = true;
+      getTQSJ(this.queryParams).then(response => {
+        this.dataList = []
+        this.dataList = response.data;
+        for (const i in this.dataList[0].datails) {
+          this.timeValue.push(this.dataList[0].datails[i].timeValue)
+        }
+        this.loading = false;
+      });
+    },
+    bondedList(){
+      this.regionList = []
+      bondedList().then(res=>{
+        for (const i in res.data) {
+          this.regionList.push({ 
+            label:res.data[i].deptName,
+            value:res.data[i].deptId,
+           })
+        }
+      })
+    },
+    getNormFeelistAll(){
+      this.normFeelistAll = []
+      normFeelistAll().then(res=>{
+        for (const i in res.data) {
+          this.normFeelistAll.push({ 
+            label:res.data[i].fname,
+            value:res.data[i].id,
+           })
+        }
+        this.getList();
+      })
+    },
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.cbIdArr = [];
+      this.queryParams.dateType = '';
+      this.queryParams.dateValue = '';
+      this.queryParams.normFeeId = '';
+      this.resetForm('queryForm');
+    },
+  }
+};
+</script>

src/views/ZBCS/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="app-container">
+    
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      
+      <el-form-item label="保税区">
+        <el-select v-model="queryParams.cbIdArr" multiple placeholder="请选择保税区">
+          <el-option
+            v-for="item in regionList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="指标名称">
+        <el-select v-model="queryParams.normFeeId" placeholder="请选择指标名称">
+          <el-option
+            v-for="item in normFeelistAll"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item>
+
+      <!-- <el-form-item label="时间类型">
+
+        <el-select v-model="queryParams.dateType" placeholder="请选择" clearable filterable class="se">
+          <el-option v-for="t in datelist" :key="t.value" :label="t.label" :value="t.value" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 1" v-model="queryParams.dateValue" placeholder="选择月" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in 12" :key="t.value" :label="t + '月'" :value="t" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 2" v-model="queryParams.dateValue" placeholder="选择季度" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in jdlist" :key="t.value" :label="t.label" :value="t.value"/>
+        </el-select>
+
+        <el-date-picker v-if="queryParams.dateType == 3" v-model="queryParams.dateValue" type="year" placeholder="选择年" value-format="yyyy" format="yyyy 年" style="margin-left: 10px;"></el-date-picker>
+
+      </el-form-item> -->
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+
+      <el-form-item label="图形类型">
+        <el-select v-model="contentType" placeholder="请选择图形类型">
+          <el-option
+            v-for="item in contentTypelist"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table  :data="dataList" v-if="contentType == '1'">
+      <el-table-column label="保税区" align="center" prop="colName">
+        <template slot-scope="scope">
+          {{ scope.row.colName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="绩效指标分值" align="center" prop="colValue">
+        <template slot-scope="scope">
+          {{ scope.row.colValue }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <category-chart v-if="contentType == '2'"  :chartData="ChartData" style="width: 100%"></category-chart>
+    <radar-char v-if="contentType == '3'"  :chartData="ChartData" style="width: 100%"></radar-char>
+  </div>
+</template>
+
+<script>
+import { getZBCS,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
+import CategoryChart from '../dashboard/categoryChart.vue';
+import radarChar from '../dashboard/radarChar.vue';
+export default {
+  name: 'ZBCS',  //指标参数排行数据
+  components:{
+    CategoryChart,
+    radarChar
+  },
+  data() {
+    return {
+      ChartData: [],
+      contentType:'1',
+      contentTypelist:[
+        { label: '列表', value: '1' },
+        { label: '柱状图', value: '2' },
+        { label: '雷达图', value: '3' },
+      ],
+      datelist:[
+        { label: '月', value: '1' },
+        { label: '季度', value: '2' },
+        { label: '年', value: '3' },
+      ],
+      jdlist:[
+        { label: '第一季度', value: '1' },
+        { label: '第二季度', value: '2' },
+        { label: '第三季度', value: '3' },
+        { label: '第四季度', value: '4' },
+      ],
+      dialogVisible: false,
+      fileList: [],
+      // 根路径
+      baseURL: process.env.VUE_APP_BASE_API,
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 系统管理表格数据
+      dataList: [],
+      // 查询参数
+      queryParams: {
+        cbIdArr:[],  //保税区id集合
+        dateType:'',  //查询时间类型(1=月，2=季度，3=年)
+        dateValue:'', //查询时间值
+        normFeeId:'',  //指标明细id
+      },
+      normFeelistAll:[],  //指标列表
+      regionList:[],  //保税区列表
+    };
+  },
+  created() {
+    this.getNormFeelistAll()
+    this.bondedList()
+  },
+  methods: {
+    
+    getList() {
+      this.dataList = []
+      this.ChartData =[]
+      getZBCS(this.queryParams).then(response => {
+        this.dataList = response.data;
+        for (const i in response.data) {
+          this.ChartData.push({ 
+            name: response.data[i].colName,
+            value: response.data[i].colValue,
+           })
+        }
+       
+        this.loading = false;
+      });
+    },
+    bondedList(){
+      this.regionList = []
+      bondedList().then(res=>{
+        for (const i in res.data) {
+          this.regionList.push({ 
+            label:res.data[i].deptName,
+            value:res.data[i].deptId,
+           })
+        }
+      })
+    },
+    getNormFeelistAll(){
+      this.normFeelistAll = []
+      this.loading = true;
+      normFeelistAll().then(res=>{
+        this.loading = true;
+        for (const i in res.data) {
+          this.normFeelistAll.push({ 
+            label:res.data[i].fname,
+            value:res.data[i].id,
+           })
+        }
+        this.loading = false;
+        this.getList();
+      })
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.cbIdArr = [];
+      this.queryParams.dateType = '';
+      this.queryParams.dateValue = '';
+      this.queryParams.normFeeId = '';
+      this.resetForm('queryForm');
+    },
+  }
+};
+</script>

src/views/ZBFS/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="app-container">
+    
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      
+      <el-form-item label="保税区">
+        <el-select v-model="queryParams.cbIdArr" multiple placeholder="请选择保税区">
+          <el-option
+            v-for="item in regionList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <!-- <el-form-item label="指标名称">
+        <el-select v-model="queryParams.normFeeId" placeholder="请选择指标名称">
+          <el-option
+            v-for="item in normFeelistAll"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item>
+
+      <el-form-item label="时间类型">
+
+        <el-select v-model="queryParams.dateType" placeholder="请选择" clearable filterable class="se">
+          <el-option v-for="t in datelist" :key="t.value" :label="t.label" :value="t.value" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 1" v-model="queryParams.dateValue" placeholder="选择月" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in 12" :key="t.value" :label="t + '月'" :value="t" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 2" v-model="queryParams.dateValue" placeholder="选择季度" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in jdlist" :key="t.value" :label="t.label" :value="t.value"/>
+        </el-select>
+
+        <el-date-picker v-if="queryParams.dateType == 3" v-model="queryParams.dateValue" type="year" placeholder="选择年" value-format="yyyy" format="yyyy 年" style="margin-left: 10px;"></el-date-picker>
+
+      </el-form-item> -->
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+
+      <!-- <el-form-item label="图形类型">
+        <el-select v-model="contentType" placeholder="请选择图形类型">
+          <el-option
+            v-for="item in contentTypelist"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item> -->
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <!-- <el-table  :data="dataList" v-if="contentType == '1'">
+      <el-table-column label="保税区" align="center" prop="cbName">
+        <template slot-scope="scope">
+          {{ scope.row.cbName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="指标名称" align="center" prop="colName">
+        <template slot-scope="scope">
+          {{ scope.row.colName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="指标分数" align="center" prop="colValue">
+        <template slot-scope="scope">
+          {{ scope.row.colValue }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <category-chart v-if="contentType == '2'"  :chartData="ChartData" style="width: 100%"></category-chart> -->
+    <!-- <category-chart :chartData="ChartData" style="width: 100%"></category-chart> -->
+  </div>
+</template>
+
+<script>
+import { getZBFS,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
+import CategoryChart from '../dashboard/categoryChart.vue';
+export default {
+  name: 'ZBFS',
+  components:{
+    CategoryChart
+  },
+  data() {
+    return {
+      ChartData: [],
+      contentType:'1',
+      contentTypelist:[
+        { label: '列表', value: '1' },
+        { label: '柱状图', value: '2' },
+        { label: '雷达图', value: '3' },
+      ],
+      datelist:[
+        { label: '月', value: '1' },
+        { label: '季度', value: '2' },
+        { label: '年', value: '3' },
+      ],
+      jdlist:[
+        { label: '第一季度', value: '1' },
+        { label: '第二季度', value: '2' },
+        { label: '第三季度', value: '3' },
+        { label: '第四季度', value: '4' },
+      ],
+      dialogVisible: false,
+      fileList: [],
+      // 根路径
+      baseURL: process.env.VUE_APP_BASE_API,
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 系统管理表格数据
+      dataList: [],
+      // 查询参数
+      queryParams: {
+        cbIdArr:[],  //保税区id集合
+        dateType:'',  //查询时间类型(1=月，2=季度，3=年)
+        dateValue:'', //查询时间值
+        normFeeId:'',  //指标明细id
+      },
+      normFeelistAll:[],  //指标列表
+      regionList:[],  //保税区列表
+    };
+  },
+  created() {
+    this.getNormFeelistAll()
+    this.bondedList()
+  },
+  methods: {
+    
+    getList() {
+      this.dataList = []
+      this.ChartData =[]
+      getZBFS(this.queryParams).then(response => {
+        this.dataList = response.data;
+        for (const i in response.data) {
+          // this.ChartData.push({ 
+          //   name: response.data[i].colName,
+          //   value: response.data[i].colValue,
+          //  })
+          if(this.chartData){
+            console.log(this.chartData);
+          }
+        }
+       
+        this.loading = false;
+      });
+    },
+    bondedList(){
+      this.regionList = []
+      bondedList().then(res=>{
+        for (const i in res.data) {
+          this.regionList.push({ 
+            label:res.data[i].deptName,
+            value:res.data[i].deptId,
+           })
+        }
+      })
+    },
+    getNormFeelistAll(){
+      this.normFeelistAll = []
+      this.loading = true;
+      normFeelistAll().then(res=>{
+        this.loading = true;
+        for (const i in res.data) {
+          this.normFeelistAll.push({ 
+            label:res.data[i].fname,
+            value:res.data[i].id,
+           })
+        }
+        this.loading = false;
+        this.getList();
+      })
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.cbIdArr = [];
+      this.queryParams.dateType = '';
+      this.queryParams.dateValue = '';
+      this.queryParams.normFeeId = '';
+      this.resetForm('queryForm');
+    },
+  }
+};
+</script>

src/views/ZBZL/index.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="app-container">
+    
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      
+      <el-form-item label="保税区">
+        <el-select v-model="queryParams.cbIdArr" multiple placeholder="请选择保税区">
+          <el-option
+            v-for="item in regionList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="指标名称">
+        <el-select v-model="queryParams.normFeeId" placeholder="请选择指标名称">
+          <el-option
+            v-for="item in normFeelistAll"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item>
+
+      <el-form-item label="时间类型">
+
+        <el-select v-model="queryParams.dateType" placeholder="请选择" clearable filterable class="se">
+          <el-option v-for="t in datelist" :key="t.value" :label="t.label" :value="t.value" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 1" v-model="queryParams.dateValue" placeholder="选择月" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in 12" :key="t.value" :label="t + '月'" :value="t" />
+        </el-select>
+
+        <el-select v-if="queryParams.dateType == 2" v-model="queryParams.dateValue" placeholder="选择季度" clearable filterable class="se" style="margin-left: 10px;">
+          <el-option v-for="t in jdlist" :key="t.value" :label="t.label" :value="t.value"/>
+        </el-select>
+
+        <el-date-picker v-if="queryParams.dateType == 3" v-model="queryParams.dateValue" type="year" placeholder="选择年" value-format="yyyy" format="yyyy 年" style="margin-left: 10px;"></el-date-picker>
+
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+
+      <el-form-item label="图形类型">
+        <el-select v-model="contentType" placeholder="请选择图形类型">
+          <el-option
+            v-for="item in contentTypelist"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+       </el-select>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table  :data="dataList" v-if="contentType == '1'">
+      <el-table-column label="保税区" align="center" prop="colName">
+        <template slot-scope="scope">
+          {{ scope.row.colName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="绩效指标分值" align="center" prop="colValue">
+        <template slot-scope="scope">
+          {{ scope.row.colValue }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <category-chart v-if="contentType == '2'"  :chartData="ChartData" style="width: 100%"></category-chart>
+    <radar-char v-if="contentType == '3'"  :chartData="ChartData" style="width: 100%"></radar-char>
+  </div>
+</template>
+
+<script>
+import { getZBZL,normFeelistAll,bondedList } from '@/api/portal/figure/figure.js';
+import CategoryChart from '../dashboard/categoryChart.vue';
+import radarChar from '../dashboard/radarChar.vue';
+export default {
+  name: 'ZBZL',
+  components:{
+    CategoryChart,
+    radarChar
+  },
+  data() {
+    return {
+      ChartData: [],
+      contentType:'1',
+      contentTypelist:[
+        { label: '列表', value: '1' },
+        { label: '柱状图', value: '2' },
+        { label: '雷达图', value: '3' },
+      ],
+      datelist:[
+        { label: '月', value: '1' },
+        { label: '季度', value: '2' },
+        { label: '年', value: '3' },
+      ],
+      jdlist:[
+        { label: '第一季度', value: '1' },
+        { label: '第二季度', value: '2' },
+        { label: '第三季度', value: '3' },
+        { label: '第四季度', value: '4' },
+      ],
+      dialogVisible: false,
+      fileList: [],
+      // 根路径
+      baseURL: process.env.VUE_APP_BASE_API,
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 系统管理表格数据
+      dataList: [],
+      // 查询参数
+      queryParams: {
+        cbIdArr:[],  //保税区id集合
+        dateType:'',  //查询时间类型(1=月，2=季度，3=年)
+        dateValue:'', //查询时间值
+        normFeeId:'',  //指标明细id
+      },
+      normFeelistAll:[],  //指标列表
+      regionList:[],  //保税区列表
+    };
+  },
+  created() {
+    this.getNormFeelistAll()
+    this.bondedList()
+  },
+  methods: {
+    
+    getList() {
+      this.ChartData =[]
+      this.dataList = []
+      getZBZL(this.queryParams).then(response => {
+        this.dataList = response.data;
+        for (const i in response.data) {
+          this.ChartData.push({ 
+            name: response.data[i].colName,
+            value: response.data[i].colValue,
+           })
+        }
+       
+        this.loading = false;
+      });
+    },
+    bondedList(){
+      this.regionList = []
+      bondedList().then(res=>{
+        for (const i in res.data) {
+          this.regionList.push({ 
+            label:res.data[i].deptName,
+            value:res.data[i].deptId,
+           })
+        }
+      })
+    },
+    getNormFeelistAll(){
+      this.normFeelistAll = []
+      this.loading = true;
+      normFeelistAll().then(res=>{
+        this.loading = true;
+        for (const i in res.data) {
+          this.normFeelistAll.push({ 
+            label:res.data[i].fname,
+            value:res.data[i].id,
+           })
+        }
+        this.loading = false;
+        this.getList();
+      })
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.cbIdArr = [];
+      this.queryParams.dateType = '';
+      this.queryParams.dateValue = '';
+      this.queryParams.normFeeId = '';
+      this.resetForm('queryForm');
+    },
+  }
+};
+</script>

src/views/dashboard/categoryChart.vue

@@ -0,0 +1,115 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+
+const animationDuration = 6000;
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    chartData: {
+      type: Array,
+      required: true,
+    },
+    height: {
+      type: String,
+      default: "400px",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      setTimeout(() => {
+        this.chart = echarts.init(this.$el, "macarons");
+        this.setOptions(this.chartData);
+      }, 300);
+    },
+    setOptions(chartData) {
+      let xAxisData = [];
+      let seriesData = [];
+      if (chartData) {
+        chartData.forEach((item, index) => {
+          xAxisData.push(item.name);
+          seriesData.push(item.value);
+        });
+      }
+      this.chart.setOption({
+        color: ["rgba(37, 97, 239, 1)"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: xAxisData,
+            axisTick: {
+              alignWithLabel: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          {
+            name: "Direct",
+            type: "bar",
+            barWidth: "60%",
+            data: seriesData,
+            animationDuration,
+
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

src/views/dashboard/circleChart.vue

@@ -0,0 +1,119 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+
+const animationDuration = 6000;
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    chartData: {
+      type: Array,
+      required: true,
+    },
+    height: {
+      type: String,
+      default: "400px",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      setTimeout(() => {
+        this.chart = echarts.init(this.$el, "macarons");
+        this.setOptions(this.chartData);
+      }, 300);
+    },
+    setOptions(chartData) {
+      let seriesData = [];
+      if (chartData) {
+        chartData.forEach((item, index) => {
+          seriesData.push({
+            name: item.normName,
+            value: item.cvalue,
+          });
+        });
+      }
+      this.chart.setOption({
+        title: {
+          text: this.title,
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                formatter: "{b}:{c}: ({d}%)",
+                textStyle: {
+                  fontWeight: "normal",
+                  fontSize: 15,
+                },
+              },
+            },
+            name: "饼图",
+            type: "pie",
+            radius: "50%",
+            data: seriesData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>

src/views/dashboard/radarChar.vue

@@ -0,0 +1,110 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "./mixins/resize";
+
+const animationDuration = 6000;
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    chartData: {
+      type: Array,
+      required: true,
+    },
+    height: {
+      type: String,
+      default: "400px",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      setTimeout(() => {
+        this.chart = echarts.init(this.$el, "macarons");
+        this.setOptions(this.chartData);
+      }, 300);
+    },
+    setOptions(chartData) {
+      let indicatorData = [];
+      let seriesData = [];
+      if (chartData) {
+        chartData.forEach((item, index) => {
+          indicatorData.push({
+            text: item.name,
+          });
+          // seriesData.push(item.value);
+          seriesData.push(item.value);
+        });
+      }
+      this.chart.setOption({
+        color: ["rgba(37, 97, 239, 1)"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        radar: [
+          {
+            indicator: indicatorData,
+            center: ["50%", "60%"],
+          },
+        ],
+        series: [
+          {
+            type: "radar",
+            areaStyle: {}, //内圈填充
+            tooltip: {
+              trigger: "item",
+            },
+            data: [
+              {
+                value: seriesData,
+                name: "绩效指标分值",
+              },
+            ],
+            animationDuration,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>