<div style="width:100%;height:300px" id="experChart2"></div>
具体方法如下
getLoadEchart(id){
let bar_data = [2,3];
let bar_data2 = [23,45];
let myChart = this.$echarts.init(document.getElementById(id));
// prettier-ignore
let option = {
//timeline基本配置都写在baseoption 中
baseOption: {
timeline: {
//loop: false,
axisType: 'category',
show: true,
autoPlay: true,
playInterval: 1000,
data: ['2020', '2021', '2022']
},
grid: {
containLabel: true },
xAxis: [{
type: 'category',
name: '',
}],
yAxis: {
type: 'value', name: '' },
series: [
{
type: 'bar',
},
],
// tooltip : {
// formatter: '{a}:{c}亿元'//a 是series中每条数据name值,c 是data数值
// },
},
//变量则写在options中
options:[
{
tooltip : {
formatter: '{a}:{c}亿元'//a 是series中每条数据name值,c 是data数值
},
legend: {
orient: 'horizontal', // 'horizontal'
icon:'rect',
top:'1%',
left:30,
itemWidth:10,
itemHeight:10,
data:['概(估)算总投资','累计到位资金','中央预算','省预算','地方预算','地方转贷','部资金','国内贷款','利用外资','企事业自筹','PPP项目建设单位资本金','其他资金来源'],
textStyle: {
// 图列内容样式
color:'#8c8c8c',
fontSize:12,
},
},
grid: {
left: 30,
right: 30,
top: '20%',
bottom:'15%',
containLabel: true
},
xAxis: [{
type : 'category',
data:[],
containLabel: true
}],
title: {
text: '金额(亿元)',
textStyle: {
fontWeight: 'normal',
fontSize:16,
},
left:30,
top:30,
},
color:['#C23531','#2F4554','#61A0A8','#D48265','#91C7AE','#749F83','#CA8622','#BDA29A','#6E7074','#546570','#C4CCD3','#C23531'],//柱状图的颜色
},
// {
// series:[
// {
// data: [560, 350, 180]
// }
// ]
// },
// {
// series:[
// {
// data: [36, 55, 96]
// }
// ]
// }
]
}
// 填充多条数据
let series = [
{
name:'概(估)算总投资'},
{
name:'累计到位资金'},
{
name:'中央预算'},
{
name:'省预算'},
{
name:'地方预算'},
{
name:'地方转贷'},
{
name:'部资金'},
{
name:'国内贷款'},
{
name:'利用外资'},
{
name:'企事业自筹'},
{
name:'PPP项目建设单位资本金'},
{
name:'其他资金来源'}
]
series.forEach((item,index) => {
if (index === 0) {
option.options[index].series = this.setData(bar_data)
}else {
let obj = {
}
obj.series = this.setData(bar_data2)
option.options.push(obj)
}
})
// option.options[0].series = this.setData(bar_data)
// 使用刚指定的配置项和数据显示图表。画布为 myCharts true为显示
if (option && typeof option === "object") {
myChart .setOption(option, true);
}
},
setData(data) {
let series = [
{
name:'概(估)算总投资'},
{
name:'累计到位资金'},
{
name:'中央预算'},
{
name:'省预算'},
{
name:'地方预算'},
{
name:'地方转贷'},
{
name:'部资金'},
{
name:'国内贷款'},
{
name:'利用外资'},
{
name:'企事业自筹'},
{
name:'PPP项目建设单位资本金'},
{
name:'其他资金来源'}
]
for(let i = 0; i< series.length; i++){
let style = {
//定义柱状图的样式
normal: {
label: {
show: false,
//柱子上方显示数值
position: 'top',
//数值可加上'%'
formatter: '{c}'
}
}
};
let markLine = {
itemStyle: {
normal: {
color:'red',
label: {
formatter: '{c}'
}
}
},
data : [
{
type : 'min',
name: '预警线'
},
{
type : 'max',
name: '预警线'
}
]
}
//每条数据指定类型为'bar'
series[i].type = 'bar';
// series中每条数据都加的样式
series[i].itemStyle = style;
// series中每条数据都加预警线
// option.options[0].series[i].markLine = markLine;
//series 中 data赋值
series[i].data = [data[i]];
};
return series
}