123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <template>
- <div style="height:100%">
- <div class="loading" v-if="loading"><a-spin /></div>
- <Echart id="leftTop" :options="options" class="left_top_inner" v-if="pageflag" ref="charts" />
- <Reacquire v-else @onclick="getData" style="line-height:200px">
- 重新获取
- </Reacquire>
- </div>
- </template>
- <script>
- import { queryAreaSaleAmount } from '@/api/bigScreen.js'
- import getDate from '@/libs/getDate.js'
- export default {
- props: {
- curYear: {
- type: [Number, String],
- default: ''
- }
- },
- data () {
- return {
- options: {},
- pageflag: true,
- timer: null,
- loading: false
- }
- },
- created () {
- this.getData()
- },
- watch:{
- curYear (a,b){
- this.getData()
- }
- },
- beforeDestroy () {
- this.clearData()
- },
- methods: {
- clearData () {
- if (this.timer) {
- clearInterval(this.timer)
- this.timer = null
- }
- },
- getData () {
- this.loading = true
- queryAreaSaleAmount(getDate.getBeDateByYear(this.curYear)).then(res => {
- // 只打印一次
- if (!this.timer) {
- console.log('区域销售金额占比', res)
- }
- if (res.status == 200) {
- const listData = []
- res.data.map(item => {
- listData.push({
- name: item.subareaNames,
- value: item.resultAmount
- })
- })
- this.$nextTick(() => {
- this.init(listData)
- this.switper()
- })
- } else {
- this.pageflag = false
- }
- this.loading = false
- })
- },
- // 轮询
- switper () {
- if (this.timer) {
- return
- }
- const looper = (a) => {
- this.getData()
- }
- 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 (list) {
- const piedata = {
- name: '区域销售金额占比',
- type: 'pie',
- radius: ['42%', '65%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 4,
- borderColor: 'rgba(0,0,0,0)',
- borderWidth: 2
- },
- data: list
- }
- this.options = {
- tooltip: {
- trigger: 'item',
- backgroundColor: 'rgba(0,0,0,.6)',
- borderColor: 'rgba(147, 235, 248, .8)',
- textStyle: {
- color: '#FFF'
- }
- },
- series: [
- // 展示圆点
- {
- ...piedata,
- tooltip: { show: true },
- label: {
- formatter: ' {b|{b}} \n {per|{d}%} ',
- // position: "outside",
- rich: {
- b: {
- color: '#fff',
- fontSize: 12,
- lineHeight: 26
- },
- c: {
- color: '#31ABE3',
- fontSize: 14
- },
- per: {
- color: '#31ABE3',
- fontSize: 14
- }
- }
- },
- labelLine: {
- length: 30, // 第一段线 长度
- length2: 10, // 第二段线 长度
- show: true
- },
- emphasis: {
- show: true
- }
- },
- {
- ...piedata,
- tooltip: { show: true },
- itemStyle: {},
- label: {
- backgroundColor: 'inherit', // 圆点颜色,auto:映射的系列色
- height: 0,
- width: 0,
- lineHeight: 0,
- borderRadius: 2.5,
- shadowBlur: 8,
- shadowColor: 'auto',
- padding: [2.5, -2.5, 2.5, -2.5]
- },
- labelLine: {
- length: 30, // 第一段线 长度
- length2: 10, // 第二段线 长度
- show: false
- }
- }
- ]
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- </style>
|