123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 |
- <template>
- <div class="center_bottom">
- <div class="loading" v-if="loading"><a-spin /></div>
- <Echart id="bottomLeftChart" :options="options" class="echarts_bottom" v-if="pageflag" ref="charts" />
- <Reacquire v-else @onclick="getData" style="line-height:200px">
- 重新获取
- </Reacquire>
- </div>
- </template>
- <script>
- import { graphic } from 'echarts'
- import { queryBrandTypeSaleAmount } from '@/api/bigScreen.js'
- export default {
- data () {
- return {
- options: {},
- pageflag: true,
- timer: null,
- loading: false
- }
- },
- props: {},
- mounted () {
- this.getData()
- },
- beforeDestroy () {
- this.clearData()
- },
- methods: {
- clearData () {
- if (this.timer) {
- clearInterval(this.timer)
- this.timer = null
- }
- },
- getData () {
- this.loading = true
- queryBrandTypeSaleAmount().then((res) => {
- console.log('品类销售分布', res)
- if (res.status == 200) {
- const ret = { category: [], barData: [] }
- res.data.map(item => {
- ret.category.push(item.productBrandName)
- ret.barData.push((item.resultAmount / 1000).toFixed(2))
- })
- this.$nextTick(() => {
- this.init(ret)
- 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 (newData) {
- this.options = {
- tooltip: {
- trigger: 'axis',
- backgroundColor: 'rgba(0,0,0,.6)',
- borderColor: 'rgba(147, 235, 248, .8)',
- textStyle: {
- color: '#FFF'
- },
- formatter: function (params) {
- // 添加单位
- var result = params[0].name + '<br>'
- params.forEach(function (item) {
- if (item.value) {
- result +=
- item.marker +
- ' ' +
- item.seriesName +
- ' : ' +
- item.value +
- '万元</br>'
- } else {
- result += item.marker + ' ' + item.seriesName + ' : 0 </br>'
- }
- })
- return result
- }
- },
- legend: {
- data: ['品类销售分布'],
- textStyle: {
- color: '#B4B4B4'
- },
- top: '0'
- },
- grid: {
- left: '50px',
- right: '10px',
- bottom: '30px',
- top: '30px'
- },
- xAxis: {
- data: newData.category,
- axisLine: {
- lineStyle: {
- color: '#B4B4B4'
- }
- },
- axisTick: {
- show: false
- }
- },
- yAxis: [
- {
- splitLine: { show: false },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#B4B4B4'
- }
- },
- axisLabel: {
- formatter: '{value}万'
- },
- name: '销售额'
- }
- ],
- series: [
- {
- name: '销售额',
- type: 'bar',
- barWidth: 30,
- itemStyle: {
- borderRadius: 0,
- color: new graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#956FD4' },
- { offset: 1, color: '#3EACE5' }
- ])
- },
- label: {
- show: true,
- position: 'outside',
- color: '#fff'
- },
- data: newData.barData
- }
- ]
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .center_bottom {
- width: 100%;
- height: 95%;
- .echarts_bottom {
- width: 100%;
- height: 100%;
- }
- }
- </style>
|