Vue中使用Echarts【第一篇】实现简单柱状图
所需工具: Vue + Vue CLI+ Echarts第一步,初始化Vue项目&引入Echarts1.使用Vue CLi构建Vue项目,并引入Echarts,引入方式见官网在这里用npm的方式引入:npm install echarts --save第二步,如果上述步骤没出啥意外,就可以在Vue项目中愉快的使用Echarts了;-)现在开始尝试实现官网给出的柱状图示...
·
所需工具: Vue + Vue CLI + Echarts
第一步,初始化Vue项目&引入Echarts
1.使用Vue CLi构建Vue项目,并引入Echarts,引入方式见官网
在这里用npm的方式引入:
npm install echarts --save
第二步,如果上述步骤没出啥意外,就可以在Vue项目中愉快的使用Echarts了;-)
现在开始尝试实现官网给出的柱状图示例。
1.在script里引入echarts
import echarts from 'echarts'
2.在data初始化一个Echarts示例并配置option
data() {
return {
chart: null,
option: {
title: {
text: 'Biu~简单柱状图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}],
color: ['#66FF99']
}
}
关于option的配置项说明:
- title: 标题组件,包含主标题和副标题。
- tooltip: 提示框组件
- legend: 图例组件
- xAxis: 直角坐标系 grid 中的 x 轴
- yAxis: 直角坐标系 grid 中的 y 轴
- series: 系列列表,具体设置图标项的样式,图形展示类型等。
3.接下来就是模板里的内容了,写一个极简的例子,创建一个div,并绑定ref
<div ref="echarts">
</div>
4.如何将模板和写好的option实例绑定起来呢,这时候就需要用到Echarts提供的API啦
(1)调用init()API,创建一个 ECharts 实例
(2)调用setOption()API,设置图表实例的配置项以及数据
methods: {
getPage() {
this.chart = echarts.init(this.$refs.echarts);
// 使用刚指定的配置项和数据显示图表。
this.chart.setOption(this.option);
}
}
5.到此,一个简单的Echarts柱状图就完成啦~
未完待续;-)
需要查看源码请移步我的github: Echarts-Demos
更多推荐
已为社区贡献2条内容
所有评论(0)