Vue中使用Echarts【第一篇】实现简单柱状图

最新推荐文章于 2023-07-25 14:55:02 发布

原创

最新推荐文章于 2023-07-25 14:55:02 发布 · 1.1w 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts #Vue

所需工具: 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: '销量