123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266 |
- <template>
- <div>
- <div class="loading" v-if="loading"><a-spin /></div>
- <Echart
- id="rightTop"
- :options="option"
- class="right_top_inner"
- v-if="pageflag"
- ref="charts"
- />
- <Reacquire v-else @onclick="getData" style="line-height: 200px">
- 重新获取
- </Reacquire>
- </div>
- </template>
- <script>
- import { graphic } from 'echarts'
- import { querySaleTrend } from '@/api/bigScreen.js'
- import getDate from '@/libs/getDate.js'
- export default {
- props: {
- curYear: {
- type: [Number, String],
- default: ''
- }
- },
- data () {
- return {
- option: {},
- pageflag: true,
- timer: null,
- loading: false
- }
- },
- mounted () {
- 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
- querySaleTrend(getDate.getBeDateByYear(this.curYear)).then((res) => {
- if (!this.timer) {
- console.log('销售趋势分析', res)
- }
- if (res.status == 200) {
- this.$nextTick(() => {
- this.init(res.data.dateList, res.data.amountList, res.data.qtyList)
- 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 (xData, yData, yData2) {
- const colorList = ['#ffaa00', '#34c2ff', '#fe9a8b', '#F56948', '#9E87FF']
- this.option = {
- tooltip: {
- trigger: 'axis',
- backgroundColor: 'rgba(0,0,0,.6)',
- borderColor: 'rgba(147, 235, 248, .8)',
- textStyle: {
- color: '#FFF'
- },
- formatter: function (params) {
- return params[0].seriesName + ': ' + (params[0].value / 10000).toFixed(2) + '万元' + '<br>' + (params[1] ? (params[1].seriesName + ': ' + params[1].value) : '')
- }
- },
- legend: {
- show: true,
- top: '0',
- left: 'center',
- textStyle: {
- color: '#eee'
- }
- },
- grid: {
- // 布局
- show: true,
- left: '5px',
- right: '5px',
- bottom: '5px',
- top: '35px',
- containLabel: true,
- borderColor: 'rgba(31,99,163,.1)'
- },
- xAxis: [{
- type: 'category',
- data: xData,
- axisLine: {
- lineStyle: {
- color: 'rgba(31,99,163,1)'
- }
- },
- axisTick: {
- show: false
- },
- axisLabel: {
- interval: 0,
- textStyle: {
- color: '#eee',
- fontWeight: '500'
- },
- // 默认x轴字体大小
- fontSize: 12,
- // margin:文字到x轴的距离
- margin: 15
- },
- boundaryGap: false
- }],
- yAxis: [{
- type: 'value',
- name: '销售金额',
- axisTick: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: colorList[0]
- }
- },
- axisLabel: {
- color: colorList[0],
- fontWeight: '500',
- formatter: function (value) {
- return (value / 10000) + '万'
- }
- },
- splitLine: {
- show: false
- }
- }, {
- type: 'value',
- position: 'right',
- name: '销售数量',
- axisTick: {
- show: false
- },
- axisLabel: {
- color: colorList[1],
- fontWeight: '500',
- formatter: '{value}'
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: colorList[1]
- }
- },
- splitLine: {
- show: false
- }
- }],
- series: [{
- name: '销售金额',
- type: 'line',
- data: yData,
- symbolSize: 1,
- symbol: 'circle',
- smooth: true,
- yAxisIndex: 0,
- showSymbol: false,
- lineStyle: {
- width: 1,
- color: new graphic.LinearGradient(0, 1, 0, 0, [{
- offset: 0,
- color: colorList[0]
- },
- {
- offset: 1,
- color: colorList[0]
- }
- ]),
- shadowColor: 'rgba(158,135,255, 0.3)',
- shadowBlur: 10,
- shadowOffsetY: 20
- },
- itemStyle: {
- normal: {
- color: colorList[0],
- borderColor: colorList[0]
- }
- }
- },
- {
- name: '销售数量',
- type: 'line',
- data: yData2,
- symbolSize: 1,
- yAxisIndex: 1,
- symbol: 'circle',
- smooth: true,
- showSymbol: false,
- lineStyle: {
- width: 1,
- color: new graphic.LinearGradient(0, 0, 1, 0, [{
- offset: 0,
- color: colorList[1]
- },
- {
- offset: 1,
- color: colorList[1]
- }
- ]),
- shadowColor: 'rgba(254,154,139, 0.3)',
- shadowBlur: 10,
- shadowOffsetY: 20
- },
- itemStyle: {
- normal: {
- color: colorList[1],
- borderColor: colorList[1]
- }
- }
- }
- ]
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .right_top_inner {
- margin-top: 0;
- }
- </style>
|