Vue中使用Echarts【第一篇】实现简单柱状图 |
您所在的位置：网站首页 › 写出echarts画图步骤 › Vue中使用Echarts【第一篇】实现简单柱状图 |
Vue中使用Echarts【第一篇】实现简单柱状图
|
所需工具: Vue + Vue CLI + Echarts 第一步，初始化Vue项目&引入Echarts1.使用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 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 |
【本文地址】
今日新闻 |
推荐新闻 |