hightcharts 鼠标提示框信息

hightcharts 鼠标提示框信息

<template>
	<div id="app">

		<el-row :gutter="12" class="mb20" v-if="isShowHighcharts">
			<el-col :span="24">
				<el-card class="box-card" :shadow="shadow">
					<el-row :gutter="12">
						<el-col :span="24">
							<x-chart :id="id" class="high" :option="option" v-if="isShowHighcharts"></x-chart>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
var myvue = {};
var qs = require('qs');
import XChart from '../../components/highcharts.vue'
import axios from 'axios'
export default {
	components: {
		XChart
	},
	data() {
		return {
			title:'',
			id: 'highcharts',
			option:{},
			option: {
                chart: {
                    type: 'line'
                },
                title: {
                    text: '' //表头文字
                },
                legend: {
                	labelFormatter: function() {
                		let text = ''
                		if(this.name == 'today'){
                			text = "今日发送"
                		}else if(this.name == 'yestday'){
                			text = "昨日发送"
                		}else if(this.name == 'beforeYestday'){
                			text = "前日发送"
                		}
						return text
					}
                },
                subtitle: {
                    text: ''//表头下文字
                },
                xAxis: {//x轴显示的内容
                    categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
						plotbands:[{//可以显示一个方块，如果需要的话可以更改透明度和颜色
							from:4.5,
							to:6.5,
							color:'rgba(68,170,213,0)'//透明度和颜色
						}]
					},
                    yAxis: {//y轴显示的内容
                    title: {
                        text: ''
                    }
                },
                tooltip: {
					style: {                      // 文字内容相关样式
					    color: "#000",
					    fontSize: "12px",
					    fontWeight: "normal"
					    // fontFamily: "Courir new"
					},
					shared: false,
					useHTML: true,
					formatter: function() {
						// console.log(this.x)
						// console.log(this.series.name)
						// console.log(myvue.data[this.x].successCount)
						return  '<b>' + myvue.data[this.series.name][this.x - 1].title + '</b><br>'
								+ '<b>' + (this.x - 1) + '-' + + this.x + '点发送：' + this.y + '</b><br>'
								+ '<b>' + '成功：' + myvue.data[this.series.name][this.x - 1].successCount + '</b><br>'
								+ '<b>' + '成功率：' + myvue.data[this.series.name][this.x - 1].percent + '</b><br>';
					}
				},
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: false // 开启数据标签
                        },
                        enableMouseTracking: true, // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                        colorByPoint:false
                    }
                },
                series: []
            },

            data: {
            	today: [],
	            yestday: [],
	            beforeYestday: []
            },
            series: [],
            isShowHighcharts: false
		}
	},
    beforeCreate:function(){
		myvue = this;
    },
	created(){
		myvue.getSmsTrendStatistics()
		myvue.getTimeIntervalTrendStatistics()
		myvue.getCompChannelList()
		myvue.getTypeChannels()

		// 2019-01-31行业通道时段发送量（条/每小时）
		let date = new Date();
        let seperator = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        let currentdate = year + seperator + month + seperator + strDate;
        myvue.option.title.text = currentdate + '行业通道时段发送量（条/每小时）'
	},
	methods: {
		// 今日-昨日-前日
		getSmsTrendStatistics(smsType){
			myvue.sendArr = []
            axios.post('/smsReport/getSmsTrendStatistics', qs.stringify({
            	smsType:smsType
            })).then(function(response) {
            	if(response.data.success){
            		let today = response.data.result.today || {}
	            	let yestday = response.data.result.yestday || {}
	            	let beforeYestday = response.data.result.beforeYestday || {}
	            	today.name = '今日发送'
	            	yestday.name = '昨日发送'
	            	beforeYestday.name = '前日发送'
	                myvue.sendArr.push(today, yestday, beforeYestday)
            	}
            })
            .catch(function(error) {
                console.log(error);
            });
		},

		// 图表
		getTimeIntervalTrendStatistics(smsType){
            axios.post('/smsReport/getTimeIntervalTrendStatistics', qs.stringify({
            	smsType: smsType
            })).then(function(response) {
                if(response.data.success){
                	let today = response.data.result.today || []
                	let yestday = response.data.result.yestday || []
                	let beforeYestday = response.data.result.beforeYestday || []

                	myvue.getArr('today', today)
                	myvue.getArr('yestday', yestday)
                	myvue.getArr('beforeYestday', beforeYestday)
                }
            })
            .catch(function(error) {
                console.log(error);
            });
		},

		getArr(day, dayArr){
			let data = {}
			let dataDayObj = {}
			let dataArr = []
			dataDayObj.title = ''
			dataDayObj.sendCount = 0
			dataDayObj.successCount = 0
			dataDayObj.percent = 0
			if(day == 'today'){
				dataDayObj.title = '今日发送'
			}else if(day == 'yestday'){
				dataDayObj.title = '昨日发送'
			}else if(day == 'beforeYestday'){
				dataDayObj.title = '前日发送'
			}
			for(let j=1; j<25; j++){
				dataArr.push(dataDayObj)
			}

			for(let i=0; i<dayArr.length; i++){
				let changeObj = {}
				changeObj.title = dataDayObj.title
				changeObj.successCount = dayArr[i].successCount
				changeObj.sendCount = dayArr[i].sendCount
				changeObj.percent = dayArr[i].successRate
				let hour = parseInt(dayArr[i].hour) - 1
				dataArr[hour] = changeObj
			}

			let seriesObj = {}
			seriesObj.name = day
			seriesObj.title = dataDayObj.title
			seriesObj.data = []

			for(let m=0; m<dataArr.length; m++){
				seriesObj.data.push(parseInt(dataArr[m].sendCount))
			}
			myvue.series.push(seriesObj)
			myvue.option.series = myvue.series
			myvue.data[day] = dataArr

			if(myvue.series.length == 3){
				myvue.isShowHighcharts = true
			}
		},
	}
};
</script>

<style lang="scss">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
font-size:14px;
	h2{margin-block-start: 0em;margin-block-end: 0em;}
	.mb10{margin-bottom:10px;}
	.mb20{margin-bottom:20px;}
	.mr20{margin-right:20px;}
	.f24{font-size:24px;}
	.orange{color:#f60;}
	.el-card{-webkit-box-shadow:none !important; box-shadow:none !important; }
	.w100{width:100px; display:inline-block}
	.w200{width:200px; display:inline-block}
}
</style>