使用电子图表的vue.js项目不显示图例

Question

我正在做一个vue.js项目，我正在使用v-charts插件。我无法为我生成的任何折线图显示图例。我能够生成具有x轴和y轴标签以及图表标题的适当图表。我已经尝试改变了一吨的不同选项的图例。我还单独导入了电子图表的图例组件。

我已经尝试了多种不同的图例格式选项。我已经开始了一个新的项目，没有任何样式，但仍然没有运气。我确信我的options对象中有一些简单的东西，但是我不能理解它。

有没有其他人遇到过这种情况，并找到了解决方案？

多年来，我一直使用这个网站作为资源，从来没有问过任何问题。我搞不懂这件事。

图表选项栏是在函数中设置的，数据在图表上适当地表示。我只需要能够显示图例。

下面是代码片段和图表截图：

<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.

Answer 1

我在导入图例时遇到了同样的问题

import 'echarts/lib/component/legend'

在我的组件中为我工作！试着玩定位道具