123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- <!--
- * @Author: daidai
- * @Date: 2022-02-28 16:16:42
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-10-25 09:18:22
- * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
- -->
- <template>
- <Echart id="leftTop" :options="options" class="left_top_inner" v-if="pageflag" ref="charts" />
- <Reacquire v-else @onclick="getData" style="line-height:200px">
- 重新获取
- </Reacquire>
- </template>
- <script>
- import { countSubareaDealerQty } from '@/api/bigScreen'
- export default {
- data () {
- return {
- options: {},
- listData: [],
- pageflag: true,
- timer: null
- }
- },
- created () {
- this.getData()
- },
- mounted () {
- },
- beforeDestroy () {
- this.clearData()
- },
- methods: {
- clearData () {
- if (this.timer) {
- clearInterval(this.timer)
- this.timer = null
- }
- },
- getData () {
- this.listData = []
- countSubareaDealerQty().then(res => {
- // 只打印一次
- if (!this.timer) {
- console.log('加盟商总数量', res)
- }
- if (res.status == 200) {
- let totalQty = 0
- res.data.map(item => {
- if (item.subareaName != 'totalQty') {
- this.listData.push({
- value: item.dealerQty,
- name: item.subareaName
- })
- } else {
- totalQty = item.dealerQty
- }
- })
- this.$emit('total', totalQty)
- this.$nextTick(() => {
- this.init()
- this.switper()
- })
- } else {
- this.pageflag = false
- }
- })
- },
- // 轮询
- switper () {
- if (this.timer) {
- return
- }
- const looper = (a) => {
- this.getData()
- }
- console.log(this.$store.state.setting)
- this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
- const myChart = this.$refs.charts.chart
- myChart.on('mouseover', params => {
- this.clearData()
- })
- myChart.on('mouseout', params => {
- this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
- })
- },
- init () {
- const piedata = {
- name: '加盟商数量',
- type: 'pie',
- radius: ['42%', '65%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 4,
- borderColor: 'rgba(0,0,0,0)',
- borderWidth: 2
- },
- data: this.listData
- }
- this.options = {
- tooltip: {
- trigger: 'item',
- backgroundColor: 'rgba(0,0,0,.6)',
- borderColor: 'rgba(147, 235, 248, .8)',
- textStyle: {
- color: '#FFF'
- }
- },
- legend: {
- show: false,
- top: '5%',
- left: 'center'
- },
- series: [
- // 展示圆点
- {
- ...piedata,
- tooltip: { show: true },
- label: {
- formatter: ' {b|{b}} \n {c|{c}个} {per|{d}%} ',
- position: 'outside',
- rich: {
- b: {
- color: '#fff',
- fontSize: 12,
- lineHeight: 26
- },
- c: {
- color: '#31ABE3',
- fontSize: 14
- },
- per: {
- color: '#31ABE3',
- fontSize: 14
- }
- }
- },
- labelLine: {
- length: 40, // 第一段线 长度
- length2: 10, // 第二段线 长度
- show: true
- },
- emphasis: {
- show: true
- }
- }
- ]
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- </style>
|