循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示(1)

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

// 注册组件后即可使用

Vue.component(‘v-chart’, VueECharts)

我们来看看图表展示的效果图

• 柱状图效果:

• 饼状图:

• 曲线图:

• 其他类型，极坐标和散点图形

• 或者曲线和柱状图组合的图形

更多的案例可以参考官网的展示介绍：https://echarts.apache.org/examples/zh/index.html

2、各种图表的展示处理

=======================================================================

对于我们需要的各种常规的柱状图、饼状图、折线图（曲线图）等，我下来介绍几个案例代码，其他的一般我们根据官方案例提供的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里面引入对应的对象即可，如下所示。