最近的项目又用到了图表库，这个艰巨的任务又交到了我手上，一年没有碰过echats了，时间久了反而手生。发个博客纪念下。
html：
<div class="chartView"> <div id="loanNum"></div> </div>
js：
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) }
