npm install echarts --save
import * as echarts from "echarts"
给定一个容器
<div ref="carInfo1" id="carInfo1"></div>
拿到容器
this.domCar1=this.$refs.carInfo1
初始化echart
this.carChart1=echarts.init(this.domCar1)
再设置样式
this.carChart1.setOption({
title:{
x:'center',
text:'一周流入车辆统计',
textStyle:{
color:'#024f9b',
opacity:0.6,
}
},
legend:{
orient:'horizontal',
x:'center',
y:25
},
xAxis:{
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
},
series:[
{
name:'蓝色车牌',
type:'bar',
data:[40,42,22,28,32,18,20]
},
{
name:'绿色车牌',
type:'bar',
data:[21,23,15,12,18,15,16]
},
{
name:'黄色车牌',
type:'bar',
data:[25,21,15,12,23,8,11]
},
]
})
title,legend,series一般所有类型都有,此为柱状图,有x轴和y轴
在series的type中修改为其他样式即可
更多样式请网上查询
若要隐藏右上角按钮:
//部分按钮
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
//部分按钮
toolbox: {
show: false,
}