效果

代码(一个是左边图的代码，一个是右边的，注释写上了，可以更改，需要进入页面就渲染就在mounted内调用一下这两个)

注意：echarts图需要容器有高度才能显示。如果需要动态的高度可以用vh和百分比设置，可以用css3函数calc来动态计算。

比如这样：

//图表自适应高度
.eee{height: calc(100vh - 390px);width: 100%;}

dom部分：

<!-- echarts图表部分 -->
    <el-row>
      <el-card>
        <el-col :span="16">
            <div ref="wrap" class="eee">
                <div ref="echart" style="height:100%;width:100%"></div>
            </div>
        </el-col>
        <el-col :span="8">
            <div ref="wrap" class="eee">
                <div ref="echart-right" style="height:100%;width:100%"></div>
            </div>
        </el-col>
      </el-card>
    </el-row>

方法部分：

      //左边线型图
    lineGraph() {
      //获取元素dom渲染表格
      var myChart = this.$echarts.init(this.$refs["echart"]);
      //配置项
      var option = {
        //顶部选项颜色
        color: ["#80FFA5", "#00DDFF"],
        //提示框组件
        tooltip: {
          //坐标轴上触发
          trigger: "axis",
          //坐标轴指示器配置项
          axisPointer: {
            //cross代表十字准星指示器
            type: "cross",
            //坐标轴指示器的文本标签
            label: {
              //文本标签背景颜色
              backgroundColor: "#6a7985",
            },
          },
        },
        //图例组件，可以点击控制显示
        legend: {
          //文本名字，改这个下面的配置项name也要改
          data: ["本期销售额", "同期销售额"],
        },
        //直角坐标系内绘图网格
        grid: {
          //网格距离调整
          left: "3%",
          right: "4%",
          bottom: "3%",
          //grid 区域是否包含坐标轴的刻度标签
          containLabel: true,
        },
        //X轴
        xAxis: [
          {
            //轴类型：类目轴
            type: "category",
            //坐标轴两边留白
            boundaryGap: false,
            //x轴文本类容
            data: [
              "9:00",
              "10:00",
              "11:00",
              "12:00",
              "13:00",
              "14:00",
              "15:00",
              "16:00",
              "17:00",
              "18:00",
            ],
          },
        ],
        //Y轴
        yAxis: [
          {//是否显示分隔线。默认数值轴显示，类目轴不显示
              splitLine:{show: false},
              //数值轴
            type: "value",
            //数值轴最大数，自动排开
            max: function (value) {
                return value.max = 2400;
            }
          },
        ],
        series: [
          {
            name: "本期销售额",
            //折线图类型
            type: "line",
            //是否平滑曲线显示
            smooth: true,
            //线的样式
            lineStyle: {
              width: 0,
            },
            //是否显示 symbol,
            showSymbol: false,
            //区域填充样式
            areaStyle: {
              //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              opacity: 0.8,
              //填充的颜色
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {// 0% 处的颜色
                  offset: 0,
                  color: "rgba(128, 255, 165)",
                },
                {// 100% 处的颜色
                  offset: 1,
                  color: "rgba(1, 191, 236)",
                },
              ]),
            },
            //折线图的高亮状态。
            emphasis: {
              //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
              //'series' 聚焦当前高亮的数据所在的系列的所有图形。
              focus: "series",
            },
            //数值
            data: [1700, 900, 300, 600, 900, 1500, 1200, 1200, 1230, 600],
          },
          {
            name: "同期销售额",
            type: "line",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgba(77, 119, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [350, 900, 1190, 1800, 1200, 900, 850, 1500, 300, 1200],
          },
        ],
      };
      //初始化表格
      myChart.setOption(option);
      //监听，根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
          myChart.resize();
        })
    },
    //右边横向条形图
    barGraph() {
      var myChart = this.$echarts.init(this.$refs["echart-right"]);
      var category = [
        "东湖店",
        "楚河汉街店",
        "光谷店",
        "长江大桥店",
        "汉口路店",
        "汉口江滩店",
        "晴川阁店",
      ];
      var barData = [730, 801, 924, 1090, 1259, 1600, 411];
      var option = {
          title:{
              text:'门店销售排行榜top10',
          },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: { show: false },
          axisLabel: { show: false },
        },
        yAxis: {
          type: "category",
          data: category,
          splitLine: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          offset: 10,
          nameTextStyle: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: "数量",
            type: "bar",
            data: barData,
            barWidth: 14,
            barGap: 10,
            smooth: true,
            label: {
              normal: {
                show: true,
                position: "right",
                offset: [5, -2],
                textStyle: {
                  color: "#333",
                  fontSize: 13,
                },
              },
            },
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              normal: {
                barBorderRadius: 7,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#3977E6" },
                  { offset: 1, color: "#37BBF8" },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
          myChart.resize();
        })
    },

  mounted() {
      //两个echarts图表调用
    this.lineGraph();
    this.barGraph();
  },