直接看图,需要的就拿走
<el-row class="card-row-box">
<el-col :span="16">
<el-card class="login_study-card" shadow="never">
<div class="login_study-chartBox" ref="loginStudy">loginStudy</div>
</el-card>
</el-col>
<el-col :span="8">
<el-row class="card-row-box">
<el-col :span="24">
<el-card shadow="never">
<div class="visit-chartBox" ref="visit">visit</div>
</el-card>
</el-col>
<el-col :span="24">
<el-card shadow="never">
<div class="score-chartBox" ref="score">score</div>
</el-card>
</el-col>
</el-row>
</el-col>
</el-row>
scrpit 部分
methods: {
init () {
this.initCharts()
},
initCharts () {
this.initLoginStudyChart()
this.initVisitChart()
this.initScoreChart()
},
initLoginStudyChart () {
let startDate = '2018-09-22'
let endDate = '2019-07-22'
let data = this.getVirtulData(startDate, endDate)
let { max, min } = this.getBestVal(data)
let comCalendar = {
left: 'center', // calendar组件离容器左侧的距离
range: [startDate, endDate], // 必填，日历坐标的范围 支持多种格式
cellSize: 12, // 日历每格框的大小，可设置单值 或数组 第一个元素是宽 第二个元素是高。 支持设置自适应：auto, 默认为高宽均为20
splitLine: { show: false }, // 设置日历坐标分隔线的样式
monthLabel: { nameMap: 'cn', position: 'end' }, // 设置日历坐标中 月份轴的样式
dayLabel: { nameMap: 'cn' } // 设置日历坐标中 星期轴的样式
}
let comSeries = {
type: 'heatmap',
coordinateSystem: 'calendar',
data
}
let dom = this.$refs.loginStudy
let myChart = this.$echarts.init(dom)
myChart.setOption({
title: {
top: 30,
text: `近10个月登录记录与学习时长`,
left: 'center'
},
tooltip: {
trigger: 'item'
},
visualMap: {
min,
max,
type: 'piecewise',
orient: 'horizontal',
left: 'center',
top: 75,
textStyle: { color: '#000' },
precision: 0,
inRange: {
// color: [ '#f0f0f0', '#dcf064', '#d2e650', '#bed228', '#a0b40a' ], // 图元的颜色
color: [ '#f0f0f0', '#dcf064', '#d2e650', '#bed228', '#5ab40a' ], // 图元的颜色
colorAlpha: 0.9, // 图元的颜色的透明度
}
},
// 日历坐标系组件
calendar: [
{
...comCalendar,
top: 160
},
{
...comCalendar,
bottom: 60
}
],
itemStyle: {
borderWidth: 1,
borderColor: 'white'
},
series: [
{
...comSeries,
name: '登录次数',
tooltip: {
formatter: params => {
return `${params.value[1]} 次登录: ${params.value[0]}`
}
}
},
{
...comSeries,
name: '学习时长',
calendarIndex: 1,
tooltip: {
formatter: params => {
let minutes = params.value[1]
let src = ''
let h = parseInt(minutes / 60)
let m = minutes % 60
if (h > 0) {
src += `${h} 小时 `
}
if (m > 0) {
src += `${m} 分钟`
}
return `学习 ${src}: ${params.value[0]}`
}
}
}
]
})
},
initVisitChart () {
let dom = this.$refs.visit
let myChart = this.$echarts.init(dom)
myChart.setOption({
legend: {},
tooltip: {},
dataset: {
source: [
[ '年份', '课堂访问', '竞赛访问' ],
[ '2016', 43, 85, 93, 25 ],
[ '2017', 83, 73, 55, 69 ],
[ '2018', 43, 85, 93, 25 ],
[ '2019', 83, 73, 55, 69 ]
]
},
xAxis: { type: 'category' },
yAxis: {},
grid: {
bottom: 30
},
series: [
{ type: 'bar', barCategoryGap: '40%', itemStyle: { color: '#c23531' } },
{ type: 'bar', barCategoryGap: '40%', itemStyle: { color: '#61a0a8' } }
]
})
},
initScoreChart () {
let dom = this.$refs.score
let myChart = this.$echarts.init(dom)
myChart.setOption({
legend: {},
tooltip: {},
dataset: {
source: [
[ '年份', '课堂得分', '竞赛得分'],
[ '2016', 46, 123, 99, 15 ],
[ '2017', 24, 98, 62, 109 ],
[ '2018', 46, 123, 99, 15 ],
[ '2019', 24, 98, 62, 109 ]
]
},
xAxis: { type: 'category' },
yAxis: {},
grid: { bottom: 30 },
series: [
{ type: 'bar', barCategoryGap: '40%', itemStyle: { color: '#c23531' } },
{ type: 'bar', barCategoryGap: '40%', itemStyle: { color: '#61a0a8' } }
]
})
},
},
mounted () {
this.$nextTick(() => {
this.init()
})
}
这个代码是从一大堆代码中拆分出来的,样式懒得贴了,demo懒的做了,没有测试,可能有bug,自己调着玩去吧.
