element-ui后台管理系统学习(5)-echarts引入与使用

蔚落 2021-08-03 01:52 430阅读 0赞

在vue组件化开发项目中，Echarts的使用是很频繁的，但是具体是怎么使用呢？下面做一下简单的介绍：

**第1步：安装Echarts**

npm install echarts --save

--------------------

**第2步：设置指定的容器，用于显示图标信息**

<div ref="myChart" style="width: 100%;height: 270px;"></div>

备注：这个容器必须是***指定的宽度与高度的容器***。

--------------------

**第3步：画图**

drawLine() {
          // 初始化echarts实例
          let myChart = echarts.init(this.$refs.myChart);
          // 配置参数
          myChart.setOption({
            title: {},
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985"
                }
              }
            },
            legend: {
              data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
              }
            ],
            yAxis: [
              {
                type: "value"
              }
            ],
            series: [
              {
                name: "邮件营销",
                type: "line",
                stack: "总量",
                areaStyle: {},
                data: [120, 132, 101, 134, 90, 230, 210]
              },
              {
                name: "联盟广告",
                type: "line",
                stack: "总量",
                areaStyle: {},
                data: [220, 182, 191, 234, 290, 330, 310]
              },
              {
                name: "视频广告",
                type: "line",
                stack: "总量",
                areaStyle: {},
                data: [150, 232, 201, 154, 190, 330, 410]
              },
              {
                name: "直接访问",
                type: "line",
                stack: "总量",
                areaStyle: { normal: {} },
                data: [320, 332, 301, 334, 390, 330, 320]
              },
              {
                name: "搜索引擎",
                type: "line",
                stack: "总量",
                label: {
                  normal: {
                    show: true,
                    position: "top"
                  }
                },
                areaStyle: { normal: {} },
                data: [820, 932, 901, 934, 1290, 1330, 1320]
              }
            ]
          });
        }

备注：画图包含2个步骤：（1）初始化echarts实例；（2）配置参数；

--------------------

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/b3e221a7a8614a15a7133acbbb69cbf7.png