【问题标题】:Legend not displaying for vue.js project using Echarts图例未显示使用 Echarts 的 vue.js 项目
【发布时间】:2020-08-05 21:46:49
【问题描述】:

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

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

有没有其他人遇到过这个问题并找到了解决方案?

多年来,我一直将此网站用作资源,从未提出过任何问题。这个我想不通。

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

代码sn-ps和下图截图:

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

【问题讨论】:

  • 尝试在没有 Vue.js 的情况下使用纯 Echarts 创建相同的内容,以摘录可能的框架错误。然后,如果您没有成功,请使用此代码并使用 jsfiddle.net 或任何类似服务在此处发布。你的信息不够,所有的心灵感应者都在休假,抱歉。

标签: vue.js echarts


【解决方案1】:

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

import 'echarts/lib/component/legend'

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-08-03
    • 1970-01-01
    • 2019-04-01
    • 2020-05-18
    • 2017-05-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-07
    相关资源
    最近更新 更多