标签：teachminute itm bar ret 60 second vue let echarts
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'}
}
}
]
}
}
},
标签：teachminute,itm,bar,ret,60,second,vue,let,echarts 来源： https://blog.csdn.net/a13145211/article/details/119902954
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。