|
|
@@ -23,9 +23,9 @@
|
|
|
<span class="tips">{{item.tips}}</span>
|
|
|
</router-link>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <h3>活动作品数统计</h3>
|
|
|
- <div id="myChart" :style="{width: '100%', height: '600px'}">
|
|
|
+ <h3>活动作品数统计</h3>
|
|
|
+ <div id="myChart" :style="{width: '100%', height: '600px'}">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -217,161 +217,161 @@
|
|
|
this.drawLine();
|
|
|
},
|
|
|
methods: {
|
|
|
- drawLine() {
|
|
|
-/* activeTotal().then(res => {
|
|
|
- const titleList = [];
|
|
|
- const countList = [];
|
|
|
- res.data.data.forEach(ele => {
|
|
|
- titleList.push(ele.name);
|
|
|
- countList.push(ele.value);
|
|
|
- })
|
|
|
- // 基于准备好的dom，初始化echarts实例
|
|
|
- let myChart = echarts.init(document.getElementById('myChart'))
|
|
|
- // 绘制图表
|
|
|
- myChart.setOption({
|
|
|
- title: {
|
|
|
- text: '活动作品统计'
|
|
|
- },
|
|
|
- tooltip: {},
|
|
|
- xAxis: {
|
|
|
- data: titleList,
|
|
|
- name: "活动名称",
|
|
|
- axisLabel : {//坐标轴刻度标签的相关设置。
|
|
|
- formatter : function(params){
|
|
|
- var newParamsName = "";// 最终拼接成的字符串
|
|
|
- var paramsNameNumber = params.length;// 实际标签的个数
|
|
|
- var provideNumber = 6;// 每行能显示的字的个数
|
|
|
- var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
|
|
|
- // 条件等同于rowNumber>1
|
|
|
- if (paramsNameNumber > provideNumber) {
|
|
|
+ drawLine() {
|
|
|
+ /* activeTotal().then(res => {
|
|
|
+ const titleList = [];
|
|
|
+ const countList = [];
|
|
|
+ res.data.data.forEach(ele => {
|
|
|
+ titleList.push(ele.name);
|
|
|
+ countList.push(ele.value);
|
|
|
+ })
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart'))
|
|
|
+ // 绘制图表
|
|
|
+ myChart.setOption({
|
|
|
+ title: {
|
|
|
+ text: '活动作品统计'
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ xAxis: {
|
|
|
+ data: titleList,
|
|
|
+ name: "活动名称",
|
|
|
+ axisLabel : {//坐标轴刻度标签的相关设置。
|
|
|
+ formatter : function(params){
|
|
|
+ var newParamsName = "";// 最终拼接成的字符串
|
|
|
+ var paramsNameNumber = params.length;// 实际标签的个数
|
|
|
+ var provideNumber = 6;// 每行能显示的字的个数
|
|
|
+ var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
|
|
|
+ // 条件等同于rowNumber>1
|
|
|
+ if (paramsNameNumber > provideNumber) {
|
|
|
|
|
|
- for (var p = 0; p < rowNumber; p++) {
|
|
|
- var tempStr = "";// 表示每一次截取的字符串
|
|
|
- var start = p * provideNumber;// 开始截取的位置
|
|
|
- var end = start + provideNumber;// 结束截取的位置
|
|
|
- // 此处特殊处理最后一行的索引值
|
|
|
- if (p == rowNumber - 1) {
|
|
|
- // 最后一次不换行
|
|
|
- tempStr = params.substring(start, paramsNameNumber);
|
|
|
- } else {
|
|
|
- // 每一次拼接字符串并换行
|
|
|
- tempStr = params.substring(start, end) + "\n";
|
|
|
- }
|
|
|
- newParamsName += tempStr;// 最终拼成的字符串
|
|
|
- }
|
|
|
+ for (var p = 0; p < rowNumber; p++) {
|
|
|
+ var tempStr = "";// 表示每一次截取的字符串
|
|
|
+ var start = p * provideNumber;// 开始截取的位置
|
|
|
+ var end = start + provideNumber;// 结束截取的位置
|
|
|
+ // 此处特殊处理最后一行的索引值
|
|
|
+ if (p == rowNumber - 1) {
|
|
|
+ // 最后一次不换行
|
|
|
+ tempStr = params.substring(start, paramsNameNumber);
|
|
|
+ } else {
|
|
|
+ // 每一次拼接字符串并换行
|
|
|
+ tempStr = params.substring(start, end) + "\n";
|
|
|
+ }
|
|
|
+ newParamsName += tempStr;// 最终拼成的字符串
|
|
|
+ }
|
|
|
|
|
|
- } else {
|
|
|
- // 将旧标签的值赋给新标签
|
|
|
- newParamsName = params;
|
|
|
- }
|
|
|
- //将最终的字符串返回
|
|
|
- return newParamsName
|
|
|
- }
|
|
|
+ } else {
|
|
|
+ // 将旧标签的值赋给新标签
|
|
|
+ newParamsName = params;
|
|
|
+ }
|
|
|
+ //将最终的字符串返回
|
|
|
+ return newParamsName
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {},
|
|
|
- series: [{
|
|
|
- name: '作品数',
|
|
|
- type: 'bar',
|
|
|
- data: countList
|
|
|
- }],
|
|
|
- grid:{//直角坐标系内绘图网格
|
|
|
- bottom:"40%" //
|
|
|
- },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {},
|
|
|
+ series: [{
|
|
|
+ name: '作品数',
|
|
|
+ type: 'bar',
|
|
|
+ data: countList
|
|
|
+ }],
|
|
|
+ grid:{//直角坐标系内绘图网格
|
|
|
+ bottom:"40%" //
|
|
|
+ },
|
|
|
|
|
|
- });
|
|
|
- });*/
|
|
|
- /*activeTotal().then(res => {
|
|
|
- let myChart = echarts.init(document.getElementById('myChart'))
|
|
|
- myChart.setOption({
|
|
|
- //backgroundColor: "#fff",
|
|
|
- title: {
|
|
|
- text: '活动作品统计',
|
|
|
- left: 'center',
|
|
|
- top: 20,
|
|
|
- textStyle: {
|
|
|
+ });
|
|
|
+ });*/
|
|
|
+ /*activeTotal().then(res => {
|
|
|
+ let myChart = echarts.init(document.getElementById('myChart'))
|
|
|
+ myChart.setOption({
|
|
|
+ //backgroundColor: "#fff",
|
|
|
+ title: {
|
|
|
+ text: '活动作品统计',
|
|
|
+ left: 'center',
|
|
|
+ top: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#000'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ min: 80,
|
|
|
+ max: 600,
|
|
|
+ inRange: {
|
|
|
+ colorLightness: [0, 1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '作品数',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: res.data.data
|
|
|
+ .sort(function (a, b) {
|
|
|
+ return a.value - b.value;
|
|
|
+ }),
|
|
|
+ roseType: 'radius',
|
|
|
+ label: {
|
|
|
color: '#000'
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- visualMap: {
|
|
|
- show: false,
|
|
|
- min: 80,
|
|
|
- max: 600,
|
|
|
- inRange: {
|
|
|
- colorLightness: [0, 1]
|
|
|
- }
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '作品数',
|
|
|
- type: 'pie',
|
|
|
- radius: '55%',
|
|
|
- center: ['50%', '50%'],
|
|
|
- data: res.data.data
|
|
|
- .sort(function (a, b) {
|
|
|
- return a.value - b.value;
|
|
|
- }),
|
|
|
- roseType: 'radius',
|
|
|
- label: {
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ lineStyle: {
|
|
|
color: '#000'
|
|
|
},
|
|
|
- labelLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#000'
|
|
|
- },
|
|
|
- smooth: 0.2,
|
|
|
- length: 10,
|
|
|
- length2: 20
|
|
|
- },
|
|
|
+ smooth: 0.2,
|
|
|
+ length: 10,
|
|
|
+ length2: 20
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#c23531',
|
|
|
+ shadowBlur: 200,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ },
|
|
|
+ animationType: 'scale',
|
|
|
+ animationEasing: 'elasticOut',
|
|
|
+ animationDelay: function () {
|
|
|
+ return Math.random() * 200;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ })*/
|
|
|
+ activeTotal().then(res => {
|
|
|
+ var myChart = echarts.init(document.getElementById("myChart"));
|
|
|
+ myChart.setOption({
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ title: {
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ // legend: {
|
|
|
+ // orient: 'vertical',
|
|
|
+ // left: 'left'
|
|
|
+ // },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '作品数',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '50%',
|
|
|
+ data: res.data.data,
|
|
|
+ emphasis: {
|
|
|
itemStyle: {
|
|
|
- color: '#c23531',
|
|
|
- shadowBlur: 200,
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
- },
|
|
|
- animationType: 'scale',
|
|
|
- animationEasing: 'elasticOut',
|
|
|
- animationDelay: function () {
|
|
|
- return Math.random() * 200;
|
|
|
}
|
|
|
}
|
|
|
- ]
|
|
|
- })
|
|
|
- })*/
|
|
|
- activeTotal().then(res => {
|
|
|
- var myChart = echarts.init(document.getElementById("myChart"));
|
|
|
- myChart.setOption({
|
|
|
- backgroundColor: '#fff',
|
|
|
- title: {
|
|
|
- left: 'center'
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- // legend: {
|
|
|
- // orient: 'vertical',
|
|
|
- // left: 'left'
|
|
|
- // },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '作品数',
|
|
|
- type: 'pie',
|
|
|
- radius: '50%',
|
|
|
- data: res.data.data,
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- })
|
|
|
- })
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ })
|
|
|
+ })
|
|
|
},
|
|
|
init() {
|
|
|
censusAllTotal().then(res => {
|
|
|
@@ -395,18 +395,22 @@
|
|
|
.front-page {
|
|
|
padding-top: 30px;
|
|
|
padding-left: 15px;
|
|
|
+
|
|
|
h3 {
|
|
|
font-size: 18px;
|
|
|
color: #353535;
|
|
|
font-weight: bold;
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
+
|
|
|
.data-summary {
|
|
|
margin-bottom: 30px;
|
|
|
+
|
|
|
.list-item {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.item {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
@@ -416,6 +420,7 @@
|
|
|
height: 200px;
|
|
|
color: #fff;
|
|
|
border-radius: 10px;
|
|
|
+
|
|
|
&:nth-child(1) {
|
|
|
background-color: #4065E0;
|
|
|
}
|
