最近的项目又用到了图表库，这个艰巨的任务又交到了我手上，一年没有碰过echats了，时间久了反而手生。发个博客纪念下。
html：
代码语言：javascript复制 <div class="chartView">
<div id="loanNum"></div>
</div>js：
代码语言：javascript复制 initNumChart() {
let myChart = this.$echarts.init(document.getElementById('loanNum'))
let colors = ['#5470C6', '#91CC75', '#FF9600']
let option = {
title: {
text: '借贷走势图'
},
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['借贷金额', '平均金额', '借贷笔数']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
// prettier-ignore
data: this.dateList
}
],
yAxis: [
{
type: 'value',
name: '平均金额',
min: 0,
max: 1000,
position: 'right',
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} 万/笔'
}
},
{
type: 'value',
name: '借贷金额',
min: 0,
max: 100000,
position: 'right',
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value} 万'
}
},
{
type: 'value',
name: '借贷笔数',
min: 0,
max: 1000,
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value} 笔'
}
}
],
series: [
{
name: '平均金额',
type: 'bar',
data: this.avgAmountList
},
{
name: '借贷金额',
type: 'bar',
yAxisIndex: 1,
data: this.loanAmountList
},
{
name: '借贷笔数',
type: 'line',
yAxisIndex: 2,
data: this.loanNumList
}
]
}
myChart.setOption(option)
}
