vue项目：重温echart图表库，折线加柱状图。

最近的项目又用到了图表库，这个艰巨的任务又交到了我手上，一年没有碰过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)
    }