前端echarts图表问题,在线等? 5
展开全部
在ECharts中,配置4组数据显示在同一折线图中,首先需要准备数据。每组数据被表示为一个对象(或称为系列),包含该组数据的所有值。这四组数据都将在图中以不同的折线显示。
以下是一个配置ECharts的基本例子:
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['系列1', '系列2', '系列3', '系列4']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6', '标签7']
},
yAxis: {
type: 'value'
},
series: [
{
name: '系列1',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '系列2',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '系列3',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '系列4',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
myChart.setOption(option);
在这个示例中,每个系列的数据都是一组数字,这些数字将被绘制在Y轴上。X轴的数据是一组标签,表示每个数据点的标签。你可以根据你自己的数据来修改这个配置。
注意:在实际使用中,你需要根据实际需要和数据情况,修改以上代码中的配置项,例如数据的名称、类型、数值等。
以下是一个配置ECharts的基本例子:
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['系列1', '系列2', '系列3', '系列4']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['标签1', '标签2', '标签3', '标签4', '标签5', '标签6', '标签7']
},
yAxis: {
type: 'value'
},
series: [
{
name: '系列1',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '系列2',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '系列3',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '系列4',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
myChart.setOption(option);
在这个示例中,每个系列的数据都是一组数字,这些数字将被绘制在Y轴上。X轴的数据是一组标签,表示每个数据点的标签。你可以根据你自己的数据来修改这个配置。
注意:在实际使用中,你需要根据实际需要和数据情况,修改以上代码中的配置项,例如数据的名称、类型、数值等。
更多追问追答
追问
老哥 您这个配置和我图片上的一点都不一样啊 你这个是很基础的四条折线图
追答
请提供数据
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询