本节课据徐完成home页面的折线图、柱状图、饼图,使用echarts。
1.echarts原理
这里不进行解释,可以前往官方文档。
2.饼图实现
效果图:
cnpm i echarts@5.1.2安转指定版本依赖,在饼图的位置添加div,不需要在main.js中引入,只需要在home下的index.vue无版本引入。
import * as echarts from 'echarts'
<el-card style="height:280px;">
<div style="height:280px" ref="echarts"></div>
</el-card>
更改mounted(){},data下包含四个图的数据,注意orderData下的第一个数据是date!!报错一直找不到是这个原因。这里用Object.keys()返回数组的属性而不包含属性值。keyArray就是一个key的集合(图例集合、数组属性集合),所以此处进行遍历。legend表示图例,就是keyArray。
mounted(){
getData().then(res => {
const { code,data } = res.data
if (code === 20000){
this.tableData = data.tableData
const order = data.orderData
const xData = order.date
const keyArray = Object.keys(order.data[0])
const series = []
keyArray.forEach(key=>{
series.push({
name:key,
data:order.data.map(item=>item[key]),
type:'line'
})
})
const option = {
xAxis:{
data:xData
},
yAxis:{},
legend:{
data:keyArray
},
series
}
const E = echarts.init(this.$refs.echarts)
E.setOption(option)
}
console.log(res)
})
}
}
3.柱状图实现
效果图:
home下的index.js。
<el-card style="height: 260px">
<div style="height:240px" ref='userEcharts'></div>
</el-card>
这段模板代码在md文件有,但需要进行少量修改。
//柱状图
const userOption = {
legend: {
// 图例文字颜色
textStyle: {
color: "#333",
},
},
grid: {
left: "20%",
},
// 提示框
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category", // 类目轴
data: data.userData.map(item=>item.date),
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
axisLabel: {
interval: 0,
color: "#333",
},
},
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
},
],
color: ["#2ec7c9", "#b6a2de"],
series: [
{
name:'新增用户',
data:data.userData.map(item=>item.new),
type:'bar'
},
{
name:'活跃用户',
data:data.userData.map(item=>item.active),
type:'bar'
}
],
}
const U = echarts.init(this.$refs.userEcharts)
U.setOption(userOption)
4.饼图实现
效果图:
原理其实跟柱状图一样,知识柱状图条件会多一些。
<el-card style="height: 260px">
<div style="height:240px" ref='videoEcharts'></div>
</el-card>
const videoOption = {
tooltip: {
trigger: "item",
},
color: [
"#0f78f4",
"#dd536b",
"#9462e5",
"#a6a6a6",
"#e1bb22",
"#39c362",
"#3ed1cf",
],
series: [
{
data:data.videoData,
type:'pie'
}
],
}
const V = echarts.init(this.$refs.videoEcharts)
V.setOption(videoOption)
至此,home界面全部完成。