使用 Echarts 的 vue.js 项目图例不显示

Question

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

我已经为图例尝试了多种不同的格式选项。我已经开始了一个没有任何样式的新项目，但仍然没有运气。我确信我的选项对象发生了一些简单的事情，但我无法弄清楚。

有其他人遇到过这个问题并找到解决方案吗？

我多年来一直使用这个网站作为资源，从未提出过问题。我无法弄清楚这一点。

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

代码片段和下图截图：

<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,
            }
          }, 
        };

该链接包含从上面的选项栏生成的图表图像。

Answer 1

我遇到了同样的问题并使用导入图例

import 'echarts/lib/component/legend'

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