基础面试题
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括:HTML,CSS,JavaScript,浏览器,性能优化等等
// 注册组件后即可使用
Vue.component(‘v-chart’, VueECharts)
我们来看看图表展示的效果图
- 柱状图效果:
- 饼状图:
- 曲线图:
- 其他类型,极坐标和散点图形
- 或者曲线和柱状图组合的图形
更多的案例可以参考官网的展示介绍:https://echarts.apache.org/examples/zh/index.html
=======================================================================
对于我们需要的各种常规的柱状图、饼状图、折线图(曲线图)等,我下来介绍几个案例代码,其他的一般我们根据官方案例提供的data数据模型,构造对应的数据即可生成,就不再一一赘述。
另外,我们也可以参考Vue-echarts封装的处理demo:https://github.com/ecomfe/vue-echarts/tree/master/src/demo
对于柱状图,效果如下:
在Vue模块页面的Template 里面,我们定义界面代码如下即可。
<v-chart
ref=“simplebar”
:options=“simplebar”
autoresize
/>
然后在data里面为它准备好数据即可,如下代码所示。
data() {
return {
simplebar: {
title: { text: ‘柱形图Demo’ },
tooltip: {},
xAxis: {
data: [‘衬衫’, ‘羊毛衫’, ‘雪纺衫’, ‘裤子’, ‘高跟鞋’, ‘袜子’]
},
yAxis: {},
series: [{
name: ‘销量’,
type: ‘bar’,
data: [5, 20, 36, 10, 10, 20]
}]
}
}
}
当然我们也可以把这些构造对应数据的逻辑放在单独的JS文件里面,然后导入即可。
例如对于饼图,它的界面效果如下所示。
它的vue视图下,Template里面的代码如下所示。
<v-chart
ref=“pie”
:options=“pie”
autoresize />
一般对于图表的数据,由于处理代码可能不少,建议是独立放在一个JS文件里面,然后我们通过import导入即可使用。
然后在data里面引入对应的对象即可,如下所示。