vue echarts 条形 bar 基本需求归纳

1.要求y轴坐标要月份。
2.浮窗要显示年与月
3.要求x轴坐标要显示的是时间
考虑的问题：
1、首先所需要的数据都是从这个图里拿的，如果拿数据的时候只拿月份浮窗就不会显示年份。
2、x轴的时间后台是反的秒，自己要通过秒来计算时间的多少展示在x轴上
3、当自己处理定义浮窗内容的时候对应前面的颜色图标将会消失

import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar' //条形组件
Vue.component('v-chart', ECharts)
Vue.prototype.ECharts = ECharts


<v-chart class="radar-chart" :options="options"></v-chart>

data(){
        return{
            options : {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {           
                        type: 'shadow'
                    },
                    //formatter里map是首先要改变数组的参数通过秒来换算小时分钟秒
                    formatter: function (datas) {
                        console.log(datas)
                        var res = datas
                        let ret = ''
                        res.map(e=>{
                            if(e.data<=59&&e.data>0){
                                e.second = parseInt(e.data)
                                e.teachhour = 0
                                e.teachminute = 0
                            }else if(e.data>60&&e.data<=3599){
                                let fen = parseInt(e.data/60)
                                let miao =parseInt(e.data-(fen*60))
                                e.teachhour = 0
                                e.teachminute = fen
                                e.second = miao
                            }else if(e.data>3599){
                                let xiaoshi =  parseInt(time/3600)
                                let fen  =parseInt((time-(xiaoshi*60*60))/60)
                                let miao = parseInt((time-(xiaoshi*60*60))-(fen*60))
                                console.log(xiaoshi)
                                console.log(fen)
                                console.log(miao)
                                e.teachhour = xiaoshi 
                                e.teachminute = fen
                                e.second = miao
                              
                            }else{
                                e.teachhour =0
                                e.teachminute = 0
                                e.second =0
                            }
                            return e
                        })
                        console.log(res)
                        //formatter里forEach就是要显示浮窗的类型以及时间，
                        // 而datas[idx].marker是为了显示自己自定义浮窗的时候图标会消失的问题
                        res.forEach((itm, idx) => {
                            console.log(itm)
                            if(itm.second!=0&&itm.teachhour==0&&itm.teachminute==0){
                               ret +=
                                `<p class="line">${datas[idx].marker} ${itm.seriesName}：<span>${itm.second}秒</span></p>`
                            }else if(itm.second!=0&&itm.teachhour==0&&itm.teachminute!=0){
                               ret +=
                                `<p class="line">${datas[idx].marker}${itm.seriesName}：<span>${itm.teachminute}分钟${itm.second}秒</span></p>`
                            }else if(itm.second==0&&itm.teachhour==0&&itm.teachminute!=0){
                               ret +=
                                `<p class="line">${datas[idx].marker}${itm.seriesName}：<span>${itm.teachminute}分钟</span></p>`
                            }else if(itm.second!=0&&itm.teachhour!=0&&itm.teachminute!=0){
                               ret +=
                                `<p class="line">${datas[idx].marker}${itm.seriesName}：<span>${itm.teachhour}小时${itm.teachminute}分钟${itm.second}分钟</span></p>`
                            }else if(itm.second==0&&itm.teachhour!=0&&itm.teachminute!=0){
                               ret +=
                                `<p class="line">${datas[idx].marker}${itm.seriesName}：<span>${itm.teachhour}小时${itm.teachminute}分钟</span></p>`
                            }else{
                                ret +=
                                `<p class="line">${datas[idx].marker}${itm.seriesName}：<span>0分钟</span></p>`
                            }
                            
                        })
                        //datas[0].axisValue这里就是为了展示浮窗的年月日
                        return `<div>${datas[0].axisValue}</div>${ret}` 
                    }
                },
                legend: {
                    data: ['心音自学(手机)', '呼吸音自学(手机)', '心脏自学(PC)', '肺脏自学(PC)'],
                    right: 20,
                    top: 30,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLabel:{
                        formatter: function (value) {
                            console.log(value)
                            var res = value
                            let ret = ''
                            if(res<=59&&res>0){
                                let second = 0
                                ret +=
                                `${second}`
                            }else if(res>59&&res<=3599){
                                let fen = parseInt(res/60)
                                let miao =parseInt(res-(fen*60))
                                let teachminute = fen
                                let second = miao
                                ret +=
                                `${teachminute}分钟`
                            }else if(res>3599){
                                let xiaoshi =  parseInt(res/3600)
                                let fen  =parseInt((res-(xiaoshi*60*60))/60)
                                let miao = parseInt((res-(xiaoshi*60*60))-(fen*60))
                                console.log(xiaoshi)
                                console.log(fen)
                                console.log(miao)
                                let teachhour = xiaoshi 
                                let teachminute = fen
                                let second = miao
                                ret +=
                                `${teachhour}小时${teachminute}分钟`
                            }else{
                                let second =0
                                 ret +=
                                `${second}`
                            }
                           return ret
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    axisLabel:{
                       //这的处理是为了在一进来的时候拿的是年月，但是x轴显示的时候月份
                       //例：2021年8月
                        formatter: function (value) {
                            console.log(value)
                            var res = value
                            var lerngs = res.length
                            let ret = res.slice(5,lerngs);
                           return ret
                        }
                    }
                    // data: []
                },
                series: [
                    {
                        name: '心音自学(手机)',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: false,
                            
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [],
                        itemStyle:{
							normal:{color:'#ffc3e4'}
						}
                    },
                    {
                        name: '呼吸音自学(手机)',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: false,
                           
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [],
                        itemStyle:{
							normal:{color:'#729ff9'}
						}
                    },
                    {
                        name: '心脏自学(PC)',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: false,
                           
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [],
                        itemStyle:{
							normal:{color:'#fa979c'}
						}
                    },
                    {
                        name: '肺脏自学(PC)',
                        type: 'bar',
                        stack: 'total',
                        label: {
                            show: false
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [],
                        itemStyle:{
							normal:{color:'#97d3c1'}
						}
                    }
                ]
            }

        }
    },