4

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.

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.

Has anybody else ever run into this and found a solution?

I have been using this site as a resource for years and never asked a question. I can't figure this one out.

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.

Code snippets and screenshot of graph below:

<template>
    <div class="standard_div">
      <!-- Begin chart component of graph -->
        <v-chart v-if="showChart" :options="chartOptionsBar"/>
        <!-- End chart component-->
    </div>
</template>

<script>
// Import a different instance ECharts into the .vue file.
import ECharts from 'vue-echarts';
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
</script>

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: ["item0"]
          },
          title:{
            show: true,
            text: this.graphTitle,
            x: 'center',
            textStyle: {
              fontSize: 20,
            }
          }, 
        };

The link includes an image of the graph that was produced from the options bar above.

rusty_shackleford
  • 41
  • 2
  • Try to create the same without Vue.js with pure Echarts to excerpt possible framework errors. Then if you have no success take this code and publish here with jsfiddle.net or any similar service. Your information is not enough, and all telepaths are on vacation, sorry. – Sergey Fedorov Aug 09 '20 at 15:57

1 Answers1

5

I had the same problem and importing the legend using

import 'echarts/lib/component/legend'

in my component worked for me! Try to play with positioning props

Dvdgld
  • 1,984
  • 2
  • 15
  • 41
Soroush
  • 51
  • 1
  • 3