|
@@ -1,170 +1,154 @@
|
|
|
<template>
|
|
|
- <div :id="pieId" class="myPie"></div>
|
|
|
+ <div :id="pieId" class="myPie"></div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name: 'BasePie',
|
|
|
- props: ['pieId', 'pieData'],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- pieDatas: [],
|
|
|
- noChooseNum: 0,
|
|
|
- chooseNum: 0
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
+ export default {
|
|
|
+ name: 'BasePie',
|
|
|
+ props: ['pieId', 'pieData'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pieDatas: [],
|
|
|
+ noChooseNum: 0,
|
|
|
+ chooseNum: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
|
|
|
- drawLine(data) {
|
|
|
- let that = this
|
|
|
- // 基于准备好的dom,初始化echarts实例
|
|
|
- let myPie = this.$echarts.init(document.getElementById(this.pieId), 'chalk')
|
|
|
+ drawLine(data) {
|
|
|
+ let that = this
|
|
|
+ // 基于准备好的dom,初始化echarts实例
|
|
|
+ let myPie = this.$echarts.init(document.getElementById(this.pieId), 'chalk')
|
|
|
|
|
|
- // 指定图表的配置项和数据
|
|
|
- var option = {
|
|
|
- legend: {
|
|
|
- y: 'bottom',
|
|
|
- textStyle: { color: '#c3cad9' },
|
|
|
- },
|
|
|
- title: {
|
|
|
- text: '选项分布饼图',
|
|
|
- left: 'center',
|
|
|
- top: 20,
|
|
|
- textStyle: {
|
|
|
- color: 'White',
|
|
|
- fontFamily: '微軟正黑體'
|
|
|
- }
|
|
|
- },
|
|
|
+ // 指定图表的配置项和数据
|
|
|
+ var option = {
|
|
|
+ legend: {
|
|
|
+ y: 'bottom',
|
|
|
+ textStyle: {
|
|
|
+ color: '#c3cad9'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: '选项分布饼图',
|
|
|
+ left: 'center',
|
|
|
+ top: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: 'White',
|
|
|
+ fontFamily: '微軟正黑體'
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: "{b} : {c} ({d}%)"
|
|
|
- },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: "{b} : {c} ({d}%)"
|
|
|
+ },
|
|
|
|
|
|
- visualMap: {
|
|
|
- show: false,
|
|
|
- min: 500,
|
|
|
- max: 600,
|
|
|
- inRange: {
|
|
|
- //colorLightness: [0, 1]
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '访问来源',
|
|
|
- type: 'pie',
|
|
|
- radius: '50%',
|
|
|
- selectedMode: 'single',
|
|
|
- selectedOffset: 10,
|
|
|
- clockwise: true,
|
|
|
- center: ['50%', '50%'],
|
|
|
- color: ['#43cadd', '#3893e5', '#FCC708', '#03B48E'], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
|
|
- data: [{
|
|
|
- name: '未投票',
|
|
|
- value: this.noChooseNum
|
|
|
- }, {
|
|
|
- name: '已投票',
|
|
|
- value: this.chooseNum
|
|
|
- }],
|
|
|
- roseType: 'radius',
|
|
|
+ visualMap: {
|
|
|
+ show: false,
|
|
|
+ min: 500,
|
|
|
+ max: 600,
|
|
|
+ inRange: {
|
|
|
+ //colorLightness: [0, 1]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ radius: '50%',
|
|
|
+ selectedMode: 'single',
|
|
|
+ selectedOffset: 10,
|
|
|
+ clockwise: true,
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ color: ['#567c94', '#11d8ff', '#FCC708', '#03B48E'], //'#FBFE27','rgb(11,228,96)','#FE5050'
|
|
|
+ data: [{
|
|
|
+ name: '未投票',
|
|
|
+ value: this.noChooseNum
|
|
|
+ }, {
|
|
|
+ name: '已投票',
|
|
|
+ value: this.chooseNum
|
|
|
+ }],
|
|
|
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- // formatter: ['{c|{b}{d}%}', '{b|{b}}'].join('\n'),
|
|
|
- // formatter: ['{b|{b}{d}%}', '{c|{c}万元}'].join('\n'),
|
|
|
- rich: {
|
|
|
- b: {
|
|
|
- color: '#d9efff',
|
|
|
- fontSize: 15,
|
|
|
- height: 40
|
|
|
- },
|
|
|
- c: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 14,
|
|
|
- fontWeight: 'bold',
|
|
|
- lineHeight: 5
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- borderWidth: '5',
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- normal: {
|
|
|
- backgroundColor: 'yellow',
|
|
|
- borderColor: 'skyblue',
|
|
|
- borderWidth: 10,
|
|
|
- lineStyle: {
|
|
|
- borderColor: 'skyblue',
|
|
|
- borderWidth: 10,
|
|
|
- backgroundColor: 'yellow',
|
|
|
- }
|
|
|
- },
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ rich: {
|
|
|
+ b: {
|
|
|
+ color: '#d9efff',
|
|
|
+ fontSize: 15,
|
|
|
+ height: 40
|
|
|
+ },
|
|
|
+ c: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 14,
|
|
|
+ fontWeight: 'bold',
|
|
|
+ lineHeight: 5
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderWidth: '5',
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ backgroundColor: 'yellow',
|
|
|
+ borderColor: 'skyblue',
|
|
|
+ borderWidth: 10,
|
|
|
+ lineStyle: {
|
|
|
+ borderColor: 'skyblue',
|
|
|
+ borderWidth: 10,
|
|
|
+ backgroundColor: 'yellow',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ };
|
|
|
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }]
|
|
|
- };
|
|
|
-
|
|
|
- // 绘制图表
|
|
|
- myPie.setOption(option)
|
|
|
- this.$nextTick(()=>{
|
|
|
+ // 绘制图表
|
|
|
+ myPie.setOption(option)
|
|
|
+ this.$nextTick(() => {
|
|
|
myPie.resize()
|
|
|
})
|
|
|
- window.addEventListener('resize', function () {
|
|
|
- myPie.resize()
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- if (this.pieData.length) {
|
|
|
- let val = this.pieData
|
|
|
- this.noChooseNum = val.filter(item => item.key === '').length ? val.filter(item => item.key === '')[0].result.length : 0
|
|
|
- let sum = 0
|
|
|
- val.forEach(item => {
|
|
|
- sum += item.result.length
|
|
|
- })
|
|
|
- this.chooseNum = sum - this.noChooseNum
|
|
|
- this.drawLine(val)
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- // 获取最新知识点占比饼图数据
|
|
|
- getPieData() {
|
|
|
- return this.$store.state.totalAnalysis.knowledgeData
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- pieData: {
|
|
|
- deep: true,
|
|
|
- handler(val) {
|
|
|
- if (val.length) {
|
|
|
- console.log("11111111111111111")
|
|
|
- this.noChooseNum = val.filter(item => item.key === '').length ? val.filter(item => item.key === '')[0].result.length : 0
|
|
|
- let sum = 0
|
|
|
- val.forEach(item => {
|
|
|
- sum += item.result.length
|
|
|
- })
|
|
|
- this.chooseNum = sum - this.noChooseNum
|
|
|
- this.drawLine(val)
|
|
|
+ window.addEventListener('resize', function() {
|
|
|
+ myPie.resize()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ if (this.pieData.length) {
|
|
|
+ let val = this.pieData
|
|
|
+ this.noChooseNum = val.filter(item => item.option === null).length
|
|
|
+ this.chooseNum = val.length - this.noChooseNum
|
|
|
+ this.drawLine(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 获取最新知识点占比饼图数据
|
|
|
+ getPieData() {
|
|
|
+ return this.$store.state.totalAnalysis.knowledgeData
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ pieData: {
|
|
|
+ deep: true,
|
|
|
+ handler(val) {
|
|
|
+ if (val.length) {
|
|
|
+ this.noChooseNum = val.filter(item => item.option === null).length
|
|
|
+ this.chooseNum = val.length - this.noChooseNum
|
|
|
+ this.drawLine(val)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
<style scoped>
|
|
|
-
|
|
|
- .myPie {
|
|
|
- width: 50%;
|
|
|
- height: 380px;
|
|
|
- margin: 0 auto;
|
|
|
- display: block;
|
|
|
- }
|
|
|
+ .myPie {
|
|
|
+ width: 50%;
|
|
|
+ height: 380px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
</style>
|