CODEWITHSUNDEEP
vue.jsecharts
rusty_shackleford
rusty_shackleford

Reputation: 41

Legend not displaying for vue.js project using Echarts

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.

Upvotes: 4

Views: 2094

Answers (1)

Soroush
Soroush

Reputation: 51

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

Upvotes: 5

Related Questions