|
|
@@ -1,39 +1,39 @@
|
|
|
<style lang="scss">
|
|
|
-.content{
|
|
|
+.content {
|
|
|
// height: 80vh;
|
|
|
}
|
|
|
// 新
|
|
|
-.item{
|
|
|
- font-size:14px;
|
|
|
- margin-bottom:20px;
|
|
|
- .item-title{
|
|
|
- margin-bottom:10px;
|
|
|
- color:#606266;
|
|
|
- .title-num{
|
|
|
+.item {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .item-title {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #606266;
|
|
|
+ .title-num {
|
|
|
display: inline-block;
|
|
|
// width:50px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
- .title-header{
|
|
|
+ .title-header {
|
|
|
// font-weight: 600;
|
|
|
}
|
|
|
- .title-type{
|
|
|
- margin-left:10px;
|
|
|
+ .title-type {
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
- .title-download{
|
|
|
- color:#409EFF;
|
|
|
+ .title-download {
|
|
|
+ color: #409eff;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
- .item-content{
|
|
|
+ .item-content {
|
|
|
// margin-left:60px;
|
|
|
- display:flex;
|
|
|
- .el-table{
|
|
|
- flex:1.5;
|
|
|
+ display: flex;
|
|
|
+ .el-table {
|
|
|
+ flex: 1.5;
|
|
|
}
|
|
|
-
|
|
|
- div{
|
|
|
- flex:1;
|
|
|
+
|
|
|
+ div {
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -42,277 +42,388 @@
|
|
|
<section>
|
|
|
<p><span>信息管理></span>问卷统计</p>
|
|
|
<div class="content">
|
|
|
- <div class="download-all" style="display:inline-block;float:right;">
|
|
|
- <el-button type="primary" icon="el-icon-download" size="mini" @click="downloadAll">导出excel</el-button>
|
|
|
+ <div class="download-all" style="display: inline-block; float: right">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-download"
|
|
|
+ size="mini"
|
|
|
+ @click="downloadAll"
|
|
|
+ >导出excel</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
- <div class='item' v-for='(item,index) in results' :key='index'>
|
|
|
- <div class='item-title'>
|
|
|
- <span class='title-num'>第{{index+1}}题：</span>
|
|
|
- <span class='title-header'>{{item.label}}</span>
|
|
|
- <span class='title-type'>{{item.type|getType}}</span>
|
|
|
- <span class="title-download" @click="downloadItem(item)">导出Excel</span>
|
|
|
+ <div class="item" v-for="(item, index) in results" :key="index">
|
|
|
+ <div class="item-title">
|
|
|
+ <span class="title-num">第{{ index + 1 }}题：</span>
|
|
|
+ <span class="title-header">{{ item.label }}</span>
|
|
|
+ <span class="title-type">{{ item.type | getType }}</span>
|
|
|
+ <span class="title-download" @click="downloadItem(item)"
|
|
|
+ >导出Excel</span
|
|
|
+ >
|
|
|
</div>
|
|
|
- <div class='item-content' v-if='item.type=="input"||item.type=="textarea"'>
|
|
|
- 【答案】：<span v-for="(item1,index) in item.result" :key="index">{{item1}}{{index==item.result.length-1?'':"、"}}</span>
|
|
|
+ <div
|
|
|
+ class="item-content"
|
|
|
+ v-if="item.type == 'input' || item.type == 'textarea'"
|
|
|
+ >
|
|
|
+ 【答案】：<span v-for="(item1, index) in item.result" :key="index"
|
|
|
+ >{{ item1 }}{{ index == item.result.length - 1 ? "" : "、" }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
- <div class='item-content' v-if='item.type=="radio"||item.type=="checkbox"'>
|
|
|
- <el-table
|
|
|
- :data="item.items"
|
|
|
- border
|
|
|
- >
|
|
|
+ <div
|
|
|
+ class="item-content"
|
|
|
+ v-if="item.type == 'radio' || item.type == 'checkbox'"
|
|
|
+ >
|
|
|
+ <el-table :data="item.items" border>
|
|
|
<el-table-column prop="label" label="选项"> </el-table-column>
|
|
|
<el-table-column prop="times" label="次数"> </el-table-column>
|
|
|
<el-table-column prop="sale" label="比例">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-progress :percentage="scope.row.sale"></el-progress>
|
|
|
- </template>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-progress :percentage="scope.row.sale"></el-progress>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <div :id="`chartPie${index}`" style="width:300px;"></div>
|
|
|
- <div :id="`chartBar${index}`" style="width:300px;"></div>
|
|
|
+ <div
|
|
|
+ :id="`chartPie${index}`"
|
|
|
+ style="width: 500px; height: 150px"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ :id="`chartBar${index}`"
|
|
|
+ style="width: 500px; height: 150px"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
-
|
|
|
</section>
|
|
|
</template>
|
|
|
<script>
|
|
|
import Page from "../../components/Page";
|
|
|
-import echarts from 'echarts';
|
|
|
+import echarts from "echarts";
|
|
|
export default {
|
|
|
components: {
|
|
|
Page,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // checked: [],
|
|
|
+ // checked: [],
|
|
|
loading: false,
|
|
|
- results:[],
|
|
|
+ results: [],
|
|
|
};
|
|
|
},
|
|
|
- filters:{
|
|
|
- getType(val){
|
|
|
- if(val=='input' | val=='textarea' ){
|
|
|
- return '【填空题】'
|
|
|
- }else if(val== 'radio'){
|
|
|
- return '【单选题】'
|
|
|
- }else if(val == 'checkbox'){
|
|
|
- return '【多选题】'
|
|
|
+ filters: {
|
|
|
+ getType(val) {
|
|
|
+ if ((val == "input") | (val == "textarea")) {
|
|
|
+ return "【填空题】";
|
|
|
+ } else if (val == "radio") {
|
|
|
+ return "【单选题】";
|
|
|
+ } else if (val == "checkbox") {
|
|
|
+ return "【多选题】";
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
methods: {
|
|
|
- downloadAll(){
|
|
|
- let message_id = this.$route.query.id
|
|
|
- let type = this.$route.query.type
|
|
|
- this.$api.downloadAnalyseAll({message_id:message_id,type:type}).then((res)=>{
|
|
|
- var elink = document.createElement('a');
|
|
|
- let blob=new Blob([res.data], {type: 'application/vnd.ms-excel,charset=UTF-8'});
|
|
|
- let objUrl=URL.createObjectURL(blob);
|
|
|
- let file_name=decodeURIComponent(res.headers['content-disposition'].split('=')[1]);
|
|
|
- console.log(file_name)
|
|
|
+ downloadAll() {
|
|
|
+ let message_id = this.$route.query.id;
|
|
|
+ let type = this.$route.query.type;
|
|
|
+ this.$api
|
|
|
+ .downloadAnalyseAll({ message_id: message_id, type: type })
|
|
|
+ .then((res) => {
|
|
|
+ var elink = document.createElement("a");
|
|
|
+ let blob = new Blob([res.data], {
|
|
|
+ type: "application/vnd.ms-excel,charset=UTF-8",
|
|
|
+ });
|
|
|
+ let objUrl = URL.createObjectURL(blob);
|
|
|
+ let file_name = decodeURIComponent(
|
|
|
+ res.headers["content-disposition"].split("=")[1]
|
|
|
+ );
|
|
|
+ console.log(file_name);
|
|
|
elink.download = file_name;
|
|
|
- elink.style.display = 'none';
|
|
|
+ elink.style.display = "none";
|
|
|
elink.href = objUrl;
|
|
|
document.body.appendChild(elink);
|
|
|
elink.click();
|
|
|
- document.body.removeChild(elink);
|
|
|
+ document.body.removeChild(elink);
|
|
|
this.download_loading = false;
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- downloadItem(item){
|
|
|
- let message_id = this.$route.query.id
|
|
|
- let type = this.$route.query.type
|
|
|
- this.$api.downloadAnalyseItem({message_id:message_id,type:type,item:item.label}).then((res)=>{
|
|
|
- var elink = document.createElement('a');
|
|
|
- let blob=new Blob([res.data], {type: 'application/vnd.ms-excel,charset=UTF-8'});
|
|
|
- let objUrl=URL.createObjectURL(blob);
|
|
|
- let file_name=decodeURIComponent(res.headers['content-disposition'].split('=')[1]);
|
|
|
- console.log(file_name)
|
|
|
+ downloadItem(item) {
|
|
|
+ let message_id = this.$route.query.id;
|
|
|
+ let type = this.$route.query.type;
|
|
|
+ this.$api
|
|
|
+ .downloadAnalyseItem({
|
|
|
+ message_id: message_id,
|
|
|
+ type: type,
|
|
|
+ item: item.label,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ var elink = document.createElement("a");
|
|
|
+ let blob = new Blob([res.data], {
|
|
|
+ type: "application/vnd.ms-excel,charset=UTF-8",
|
|
|
+ });
|
|
|
+ let objUrl = URL.createObjectURL(blob);
|
|
|
+ let file_name = decodeURIComponent(
|
|
|
+ res.headers["content-disposition"].split("=")[1]
|
|
|
+ );
|
|
|
+ console.log(file_name);
|
|
|
elink.download = file_name;
|
|
|
- elink.style.display = 'none';
|
|
|
+ elink.style.display = "none";
|
|
|
elink.href = objUrl;
|
|
|
document.body.appendChild(elink);
|
|
|
elink.click();
|
|
|
- document.body.removeChild(elink);
|
|
|
+ document.body.removeChild(elink);
|
|
|
this.download_loading = false;
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
getData() {
|
|
|
- let message_id = this.$route.query.id
|
|
|
- let type = this.$route.query.type
|
|
|
- this.$api.getMessageSurveyQuestionAnalyse({id:message_id,type:type}).then((res) => {
|
|
|
- this.results = res.data.data;
|
|
|
- this.results.forEach((item,index)=>{
|
|
|
- this.$nextTick(function(){
|
|
|
- this.getEcharts(item,index);
|
|
|
- })
|
|
|
+ let message_id = this.$route.query.id;
|
|
|
+ let type = this.$route.query.type;
|
|
|
+ this.$api
|
|
|
+ .getMessageSurveyQuestionAnalyse({ id: message_id, type: type })
|
|
|
+ .then((res) => {
|
|
|
+ this.results = res.data.data;
|
|
|
+ this.results.forEach((item, index) => {
|
|
|
+ this.$nextTick(function () {
|
|
|
+ this.getEcharts(item, index);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getEcharts(item, index) {
|
|
|
+ var myChart = this.$echarts.init(
|
|
|
+ document.getElementById(`chartBar${index}`)
|
|
|
+ );
|
|
|
+ var myChart1 = this.$echarts.init(
|
|
|
+ document.getElementById(`chartPie${index}`)
|
|
|
+ );
|
|
|
+ let dataPie = [];
|
|
|
+ let dataBarX = [];
|
|
|
+ let dataBarY = [];
|
|
|
+ let colors = [
|
|
|
+ "#9379ff",
|
|
|
+ "#62A2FF",
|
|
|
+ "#FFD053",
|
|
|
+ "#FF9F41",
|
|
|
+ "#FF542C",
|
|
|
+ "#FE8463",
|
|
|
+ "#9BCA63",
|
|
|
+ "#FAD860",
|
|
|
+ "#F3A43B",
|
|
|
+ "#60C0DD",
|
|
|
+ "#D7504B",
|
|
|
+ "#C6E579",
|
|
|
+ "#F4E001",
|
|
|
+ "#F0805A",
|
|
|
+ "#26C0C0",
|
|
|
+ ];
|
|
|
+ let pieColors = []
|
|
|
+ item.items.forEach((item, index) => {
|
|
|
+ dataPie.push({
|
|
|
+ name: item.label,
|
|
|
+ value: item.times,
|
|
|
+ color:colors[index],
|
|
|
+ itemStyle : {
|
|
|
+ normal : {
|
|
|
+ label : {
|
|
|
+ show : true,
|
|
|
+ color:colors[index]
|
|
|
+ },
|
|
|
+ labelLine : {
|
|
|
+ show : true,
|
|
|
+ color:colors[index]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ dataPie = dataPie.filter(function(x){if(x.value==0){return false}return true})
|
|
|
+ dataPie.forEach((item,index)=>{
|
|
|
+ pieColors.push(item.color)
|
|
|
})
|
|
|
+ dataBarX.push(item.label);
|
|
|
+ dataBarY.push({
|
|
|
+ sale: item.sale,
|
|
|
+ value: item.times,
|
|
|
+ itemStyle: { color: colors[index] },
|
|
|
+ });
|
|
|
});
|
|
|
- },
|
|
|
- getEcharts(item,index){
|
|
|
- var myChart = this.$echarts.init(document.getElementById(`chartBar${index}`));
|
|
|
- var myChart1 = this.$echarts.init(document.getElementById(`chartPie${index}`));
|
|
|
- let dataPie = []
|
|
|
- let dataBarX = []
|
|
|
- let dataBarY = []
|
|
|
- item.items.forEach((item,index)=>{
|
|
|
- dataPie.push({name:item.label,value:item.times})
|
|
|
- dataBarX.push(item.label)
|
|
|
- dataBarY.push(item.times)
|
|
|
- })
|
|
|
let option = {
|
|
|
- color: ['#5066FF'],
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- top:'10%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- data: dataBarX,
|
|
|
-
|
|
|
- axisTick: {
|
|
|
- alignWithLabel: true
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#D4D8EE',
|
|
|
- width: 2 ,
|
|
|
- type:'dotted',
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel:{
|
|
|
- // formatter:function(val) {
|
|
|
- // console.log(val,"")
|
|
|
- // return '中国科' //对每个标签处理后的结果（通过js字符串方法处理）
|
|
|
- // },
|
|
|
- // x轴字体颜色
|
|
|
- textStyle: {
|
|
|
- color: '#999999',
|
|
|
- // lineHeight: 20,
|
|
|
- fontSize: 12
|
|
|
- },
|
|
|
- align:'center',
|
|
|
- // padding:[10,0 ,0,-40],
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- boundaryGap: ['0%', '20%'],
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#666666', //更改坐标轴文字颜色
|
|
|
- fontSize : 14 //更改坐标轴文字大小
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle:{
|
|
|
- type:'dashed'
|
|
|
- }
|
|
|
- }
|
|
|
- // data:['0' , '100' , '200' , '300,400]
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '次数',
|
|
|
- type: 'bar',
|
|
|
- barWidth: '30px',
|
|
|
- data: dataBarY,
|
|
|
- itemStyle: {
|
|
|
- //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
|
|
- normal: {
|
|
|
- //柱形图圆角，初始化效果
|
|
|
- barBorderRadius:[10, 10, 10, 10]
|
|
|
- }
|
|
|
- },
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
- let option1 = {
|
|
|
- // backgroundColor: '#dddddd',
|
|
|
- // title: {
|
|
|
- // text: 'Customized Pie',
|
|
|
- // left: 'center',
|
|
|
- // top: 20,
|
|
|
- // textStyle: {
|
|
|
- // color: '#ccc'
|
|
|
- // }
|
|
|
- // },
|
|
|
- color:['#9379ff','#62A2FF', '#FFD053', '#FF9F41','#FF542C'],
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
+ title: {
|
|
|
+ subtext: "填报次数",
|
|
|
+ },
|
|
|
+ color: ["#5066FF"],
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "2%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ // top:'0px',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: dataBarX,
|
|
|
+
|
|
|
+ axisTick: {
|
|
|
+ alignWithLabel: true,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#D4D8EE",
|
|
|
+ width: 2,
|
|
|
+ type: "dotted",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ // formatter:function(val) {
|
|
|
+ // console.log(val,"")
|
|
|
+ // return '中国科' //对每个标签处理后的结果（通过js字符串方法处理）
|
|
|
+ // },
|
|
|
+ // x轴字体颜色
|
|
|
+ textStyle: {
|
|
|
+ color: "#999999",
|
|
|
+ // lineHeight: 20,
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ align: "center",
|
|
|
+ // padding:[10,0 ,0,-40],
|
|
|
+ },
|
|
|
},
|
|
|
-
|
|
|
- series: [{
|
|
|
- name: '访问来源',
|
|
|
- type: 'pie',
|
|
|
- radius: '45%',
|
|
|
- center: ['50%', '50%'],
|
|
|
- data:dataPie.sort(function (a, b) { return a.value - b.value; }),
|
|
|
- roseType: 'radius',
|
|
|
- label: {
|
|
|
- color: 'rgba(102, 102, 102,1)',
|
|
|
- fontSize:14
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: ["0%", "20%"],
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ minInterval: 1,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: "#666666", //更改坐标轴文字颜色
|
|
|
+ fontSize: 14, //更改坐标轴文字大小
|
|
|
},
|
|
|
- labelLine: {
|
|
|
- lineStyle: {
|
|
|
- color: 'rgba(000, 000, 000, 0.1)'
|
|
|
- },
|
|
|
- smooth: 0.2,
|
|
|
- length: 20,
|
|
|
- length2: 8
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
},
|
|
|
- itemStyle: {
|
|
|
- // color: '#c23531',
|
|
|
- // shadowBlur: 200,
|
|
|
- // shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ },
|
|
|
+ // data:['0' , '100' , '200' , '300,400]
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "次数",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: "30px",
|
|
|
+ data: dataBarY,
|
|
|
+ itemStyle: {
|
|
|
+ //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
|
|
|
+ normal: {
|
|
|
+ //柱形图圆角，初始化效果
|
|
|
+ barBorderRadius: [10, 10, 10, 10],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top",
|
|
|
+ formatter: function (v) {
|
|
|
+ return v.data.sale ? v.data.sale + "%" : "0%";
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ let option1 = {
|
|
|
+ // backgroundColor: '#dddddd',
|
|
|
+ // title: {
|
|
|
+ // text: 'Customized Pie',
|
|
|
+ // left: 'center',
|
|
|
+ // top: 20,
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#ccc'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ color: pieColors,
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
+ },
|
|
|
|
|
|
- animationType: 'scale',
|
|
|
- animationEasing: 'elasticOut',
|
|
|
- animationDelay: function (idx) {
|
|
|
- return Math.random() * 200;
|
|
|
- }
|
|
|
- }]
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "访问来源",
|
|
|
+ type: "pie",
|
|
|
+ radius: "65%",
|
|
|
+ // center: ['50%', '50%'],
|
|
|
+ data: dataPie.sort(function (a, b) {
|
|
|
+ return a.value - b.value;
|
|
|
+ }),
|
|
|
+ // roseType: 'radius',
|
|
|
+ // label: {
|
|
|
+ // color: "rgba(102, 102, 102,1)",
|
|
|
+ // fontSize: 14,
|
|
|
+ // },
|
|
|
+ // labelLine: {
|
|
|
+ // // show:false,
|
|
|
+ // lineStyle: {
|
|
|
+ // color: "rgba(000, 000, 000, 0.1)",
|
|
|
+ // },
|
|
|
+ // smooth: 0.2,
|
|
|
+ // length: 20,
|
|
|
+ // length2: 8,
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // // color: '#c23531',
|
|
|
+ // // shadowBlur: 200,
|
|
|
+ // // shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ // normal:{
|
|
|
+ // label:{
|
|
|
+ // show: function(val){
|
|
|
+ // console.log(val,222222222)
|
|
|
+ // return false
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // labelLine: {
|
|
|
+ // show: true
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // },
|
|
|
+ data: dataPie.sort(function (a, b) {
|
|
|
+ return a.value - b.value;
|
|
|
+ }),
|
|
|
+ animationType: "scale",
|
|
|
+ animationEasing: "elasticOut",
|
|
|
+ animationDelay: function (idx) {
|
|
|
+ return Math.random() * 200;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
- myChart.setOption(option)
|
|
|
- myChart1.setOption(option1)
|
|
|
+ myChart.setOption(option);
|
|
|
+ myChart1.setOption(option1);
|
|
|
},
|
|
|
},
|
|
|
- mounted(){
|
|
|
- this.results.forEach((item,index)=>{
|
|
|
- this.$nextTick(function(){
|
|
|
- this.getEcharts(item,index);
|
|
|
- })
|
|
|
- })
|
|
|
+ mounted() {
|
|
|
+ this.results.forEach((item, index) => {
|
|
|
+ this.$nextTick(function () {
|
|
|
+ this.getEcharts(item, index);
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
created() {
|
|
|
- this.getData()
|
|
|
+ this.getData();
|
|
|
},
|
|
|
};
|
|
|
</script>
|
xjc