第二部分 展示多个图表
2. 展示多个图表
导入多个图表其实很简单,只需在第一个案例的基础上,在创建一个新的dom,初始新的实例,配置对应的内容
展示案例图:
代码:
// 基于准备好的dom,初始化echarts实例
let box1 = document.querySelector('.box1')
let box2 = document.querySelector('.box2')
// 使用init方法,初始化echarts的实例
let myCharts1 = echarts.init(box1)
let myCharts2 = echarts.init(box2)
// 设置配置项
myCharts1.setOption({
// title配置项专门设置标题
title:{
text:'echarts的基本使用(我是主标题)',
subtext:'我是副标题',
// 设置标题的位置
left:'center',
// 设置主标题字体样式
textStyle:{
color:"red",
fontWeight:'bold',
fontFamily:'微软雅黑'
},
// 设置副标题字体样式
subtextStyle:{
color:"#555",
fontWeight:'lighter',
fontFamily:'微软雅黑'
}
},
// x轴
xAxis:{
data:['衣服','食品','生活用品','家具','厨具','裤子']
},
// y轴
yAxis:{
// 设置是否显示y轴线
axisLine:{
show:true
},
// 设置是否显示y轴刻度
axisTick:{
show:true
}
},
// 设置图表的类型
series:[
{
type:'bar',
data:[10,45,23,67,30,12]
}
]
})
myCharts2.setOption({
title:{
text:'我是第二个图表(主标题)',
subtext:'我是副标题',
left:'center'
},
xAxis:{
data:['衣服','食品','生活用品','家具','厨具','裤子']
},
yAxis:{
axisLine:{
show:true
},
axisTick:{
show:true
}
},
series:{
type:"line",
data:[10,53,20,82,60,30]
}
})
总结
以上就是今天要讲的内容,希望对大家有所帮助!!!