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'}
}
}
]
}
}
},
标签：teachminute,itm,bar,ret,60,second,vue,let,echarts 来源： https://blog.csdn.net/a13145211/article/details/119902954