<template>
<div>
// 动态生成echarts折线图数量
<template v-for="(item,index) in columnLabel">
<div :id="'chart-container'+index" :style="{'width': '100%', 'height': '30%'}"></div>
</template>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
// ===============================动态生成echarts折线图数量==================================
columnLabel: [],
}
},
methods: {
// ===============================动态生成echarts折线图数量==================================
// echarts 图表 // 根据后端返回的数据动态显示echarts数量
handleEcharts(chartData, index) {
// console.log(chartData);
let energySize = document.getElementById('chart-container' + index)
let energyChart = echarts.init(energySize);
energyChart.setOption({
title: {
text: this.echartsList[index]
},
tooltip: {
trigger: 'axis'
},
legend: {
show:true,
top: "2%",
// textStyle: {
// color: ["#90979c","#5470c6"]
// },
data: this.nameList
},
xAxis: {
type:'category',
data: this.xAxisData
},
yAxis: {
type: 'value'
},
series: [
{
name: this.nameList[0],
type: 'line',
data: this.columnLabel[index].value[0]
},
{
name: this.nameList[1],
type: 'line',
data: this.columnLabel[index].value[1]
},
{
name: this.nameList[2],
type: 'line',
data: this.columnLabel[index].value[2]
},
{
name: this.nameList[3],
type: 'line',
data: this.columnLabel[index].value[3]
},
{
name: this.nameList[4],
type: 'line',
data: this.columnLabel[index].value[4]
},
]
})
},
// ------------------折线图中折线的数量不确定----------------------------------
handleEcharts1() {
let energySize = document.getElementById('data-report')
let energyChart = echarts.init(energySize);
let arr = []
for (let i = 0;i < this.seriesData.length; i++) {
arr.push({
name: this.nameList[i],
type: 'line',
// stack: "Total",
data: this.seriesData[i]
})
}
window.addEventListener('resize', function() {
energyChart.resize()
})
energyChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
top: "26%",
left: '10%',
right: '10%',
bottom: '2%',
containLabel: true
},
legend: {
top: "5%",
right:'10%',
// show:true,
// x: "25%",
// top: "8%",
textStyle: {
color: 'gray'
},
// data: this.nameList
},
xAxis: {
type:'category',
data: this.xAxisData
},
yAxis: {
type: 'value',
// name: this.yAxisName,
// nameTextStyle: {
// fontWeight: '600',
// color:'#000'
// },
},
series: arr
})
},
// ------------------柱状图中柱子的数量不确定----------------------------------
handleBarEcharts() {
let energySize = document.getElementById('bar-container')
let energyChart = echarts.init(energySize);
let arr = []
for (let i = 0; i < this.seriesData.length; i++) {
arr.push({
name: this.nameList[i],
type: 'bar',
showBackground: true,
barWidth: '10%',
// stack: "Total",
data: this.seriesData[i]
})
}
energyChart.setOption({
title: {
text: this.title
},
tooltip: {
trigger: 'axis'
// top: "20%",
},
grid: {
top: "26%",
left: '10%',
right: '10%',
bottom: '2%',
containLabel: true
},
legend: {
// show:true,
// x: "-5%",
top: "5%",
right:'10%',
textStyle: {
color: 'gray'
},
// data: this.nameList
},
xAxis: {
type:'category',
data: this.xAxisData
},
yAxis: {
type: 'value',
},
series:arr,
})
window.addEventListener('resize', function() {
energyChart.resize()
})
},
},
mounted () {
}
}
</script>
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
