2021 Vue全家桶开发电商管理系统（Element-UI）09 数据报表功能

刺骨的言语ヽ痛彻心扉 2023-01-07 07:20 160阅读 0赞

# 09 数据报表功能 #

## 渲染图表 ##

#### 安装echarts运行时依赖 ####

![image-20210115230626233][]

#### echarts使用 ####

步骤：

1.  导入echarts和lodash
2.  创建Echarts容器Dom
3.  初始化Echarts实例
4.  设置配置项和数据 （使用lodash进行数据项合并）
5.  显示图表

template中
    
        <el-card>
          
          <div id="main" style="width: 600px;height:400px;"></div>
        </el-card>
    
    
    script中
    //1.导入
    var echarts = require("echarts");
    import _ from "lodash";
    
    export default { 
      name: "Report",
      data() { 
        return { 
          option: { 
            title: { 
              text: "ECharts 入门示例"
            },
            tooltip: { },
            legend: { 
              data: ["销量"]
            },
            xAxis: { 
              data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: { },
            series: [
              { 
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20]
              }
            ]
          }
        };
      },
      //此时dom元素渲染完毕
      async mounted() { 
        // 3.基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("main"));
        // 4.指定图表的配置项和数据
        const {  data: res } = await this.$http.get(`reports/type/1`);
        if (res.meta.status !== 200) return this.$message.error("获取数据失败");
    
        const result = _.merge(res.data, this.option);
        // 5.使用刚指定的配置项和数据显示图表。
        myChart.setOption(result);
      }
    };
    </script>

![image-20210115232150107][]

[image-20210115230626233]: /images/20221119/33de3a6b0a874e109d3784e8971deb6a.png
[image-20210115232150107]: https://img-blog.csdnimg.cn/img_convert/2fa2e84236243d780153bbf2932e5b6b.png