近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择。项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了。亲自动手实践了下,整理总结,希望对小伙伴提供一些帮助,少踩一些坑。
Echarts官网木有良好的说明啊,你知道不知道…
// 绘制条形图
myChart.setOption({
title: {
text: 'Echarts 入门实例',
top: 5,
left: 'center'
},
legend: {
data: ['衣服', '帽子', '裤子', '鞋子'],
top: 30
},
// X轴
xAxis: {
data: [
'一月', '二月', '三月', '四月'
]
},
// Y轴
yAxis: {},
// 数据
series: [
{
name: '衣服',
type: 'bar',
data: [120, 100, 440, 320]
},
{
name: '帽子',
type: 'bar',
data: [200, 120, 240, 330]
},
{
name: 'bar',
type: 'line',
data: [120, 200, 240, 260, 300]
},
{
name: 'bar',
type: 'line',
data: [120, 200, 300, 140, 260]
}
]
})
}
}
}
</script>
看效果:
Echarts的条形图bar
缺点:如果是完整的引入Echarts,会额外的引入其他无用的配置文件,造成应用文件体积过大,资源加载耗时过长,影响用户体验。
按此方式打包的项目,会只加载引用你所使用的图表、标题、提示信息等组件,降低了应用文件体积,实现按需加载
在上面的实例中,我们单独配置的echarts文件,需要引入对应的图表、标题、提示信息等,都需要我们手动进行加载,比较麻烦。引入babel-plugin-equire插件,方便使用。
好了,各位小伙伴,以上就是百度Echarts图表在Vue项目中应用的分享,喜欢的小伙伴记得点击在看,转发朋友圈分享呦!