title: Legend not displaying for vue.js project using Echarts
body: <p>I am working on a vue.js project and I am using the v-charts plugin. I cannot get the legend to display for any of the line graphs I am producing. I am able to produce the appropriate chart with x-axis and y-axis labels and a title for the chart. I have tried altering a ton of different options for the legend. I have also imported the legend component for e-charts individually.</p>
  <p>I have tried multiple different formatting options for the legend.I have started a new project without any styling and still no luck. I'm sure there's something simple going on with my options object but I cannot figure it out.</p>
  <p>Has anybody else ever run into this and found a solution?</p>
  <p>I have been using this site as a resource for years and never asked a question. I can't figure this one out.</p>
  <p>The chart options bar is being set in a function and the data is represented appropriately on the graph. I just need to  be able to display the legend.</p>
  <p>Code snippets and screenshot of graph below:</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;standard_div&quot;&gt;
        &lt;!-- Begin chart component of graph --&gt;
          &lt;v-chart v-if=&quot;showChart&quot; :options=&quot;chartOptionsBar&quot;/&gt;
          &lt;!-- End chart component--&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <pre><code>&lt;script&gt;
  // Import a different instance ECharts into the .vue file.
  import ECharts from 'vue-echarts';
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/title'
  &lt;/script&gt;
  </code></pre>
  <pre><code>chartOptionsBar = {
            xAxis: {
              // The data for the series
              data: this.xAxisSeries,
              // Parameters for the x axis
              name: this.x_axis,
              nameLocation: 'middle',
              nameTextStyle: {
                padding: [20, 20, 20, 20],
                fontWeight: 'bold',
              }
            },
            yAxis: {
              // Parameters for the x axis
              name: this.y_axis,
              nameLocation: 'middle',
              nameTextStyle:{
                padding: [25, 25, 25, 25],
                fontWeight: 'bold',
              }
            },
            series: [
              {type: 'line', data: this.yAxisSeries},
            ],
            legend:{
              top: 'auto',
              left: 'auto',
              right: 'auto',
              bottom: 'auto',
              width: '50%',
              orient: 'horizontal',
              lineHeight: '56',
              padding: 25,
              type: 'plain',
              zlevel: 20,
              data: [&quot;item0&quot;]
            },
            title:{
              show: true,
              text: this.graphTitle,
              x: 'center',
              textStyle: {
                fontSize: 20,
              }
            }, 
          };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/sTRFU.png" rel="nofollow noreferrer">The link includes an image of the graph that was produced from the options bar above.</a></p>