【发布时间】: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 或任何类似服务在此处发布。你的信息不够,所有的心灵感应者都在休假,抱歉。