首先定义好图标的宽高
<div id="indexc4" class="echarts2"></div>
这里是css样式
.echarts2 {
height: 350px;
width: 100%;
/*border-radius: 25px;*/
}
编辑图表的相关属性
option2: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter: function (params) {
var tar = params[0];
var tar1 = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + (tar.value).toFixed(2)+ "万元" + '<br/>' + tar1.seriesName + ' : ' + tar1.value + "笔";
}
},
legend: {
data: ['放款订单金额', '放款订单笔数']
},
color: ['#1685ff', '#efc11a'],
xAxis: [
{
type: 'category',
data: this.timeList,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '金额(万元)',
// min: 0,
// max: 5000,
// interval: 1000,
axisLabel: {
formatter: function (params) {
return params;
}
}
},
{
type: 'value',
name: '笔数',
// min: 0,
// max: 2500,
// interval: 500,
axisLabel: {
formatter: function (params) {
return params;
}
}
}
],
series: [
{
name: '放款订单金额',
type: 'bar',
barMaxWidth: 80, //最大柱宽度
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//给柱子设置渐变色
offset: 0,
color: '#2D93FF'
}, {
offset: 1,
color: '#14D0FF'
}]),
// barBorderRadius: 12,//
},
},
data: this.signList
},
{
name: '放款订单笔数',
type: 'bar',
barMaxWidth: 80, //最大柱宽度
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//柱子设置渐变色
offset: 0,
color: '#F57423'/
}, {
offset: 1,
color: '#F5A623'
}]),
// barBorderRadius: 12,
},
},
data: this.countList
}
]
},
在钩子函数中调用
var myChart3 = echarts.init(document.getElementById('indexc4'));
myChart3.setOption(this.option2);
注意:在拿到数据之后要给option2中相关的的data赋值然后重新调用钩子函数中的代码
this.option2.xAxis[0].data = respond.data.data.timeList
this.option2.series[0].data = this.signList
this.option2.series[1].data = respond.data.data.countList
var myChart3 = echarts.init(document.getElementById('indexc4'));
myChart3.setOption(this.option2);
《横向柱形统计图》
《饼图》