如何使用 chart 图表组件

效果图：

安装：

cnpm install --save chart.js

使用：

首先，在<template></template>中写入：

<div class="chart-container" style="position: relative;width: 550px;height: 335px;margin: auto">
    <canvas id="lineChart" width="550" height="335"></canvas>
</div>

其次，在<script></script>中写入：

<script>
import Chart from 'chart.js'

export default {
  name: 'chart',
  mounted () {
    let that = this
    // chart.js
    const ctx = document.getElementById('lineChart').getContext('2d')
    const lineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'],
        datasets: [{
          label: 'London',
          fill: false,
          data: [18.9, 28.8, 39.3, 81.4, 47, 20.3, 24, 35.6],
          backgroundColor: 'rgba(58, 161, 255, 0.2)',
          borderColor: 'rgba(58, 161, 255,1)',
          borderWidth: 1
        }, {
          label: 'Berlin',
          fill: false,
          data: [12.4, 23.2, 34.5, 99.7, 52.6, 35.5, 37.4, 42.4],
          backgroundColor: 'rgba(78, 203, 115, 0.2)',
          borderColor: 'rgba(78, 203, 115, 1)',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,

        // 布局,个人不建议使用
        // layout: {
        //   padding: {
        //     left: 100,
        //     right: 150,
        //     top: 0,
        //     bottom: 400
        //   }
        // },

        // 标题
        title: {
          display: false,
          text: ['降雨量统计', '(伦敦和柏林)'], // 标题及子标题
          fontColor: ['#000000'],
          fontSize: 15
        },
        // 图例
        legend: {
          position: 'bottom',
          labels: {
            fontSize: 10,
            boxWidth: 9
          }
        },
        tooltips: {
          mode: 'index',
          intersect: false
        },
        hover: {
          mode: 'nearest',
          intersect: true
        },
        // 坐标
        scales: {
          xAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: '月份'
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: '月均降雨量'
            },
            ticks: {
              beginAtZero: true,
              min: 0,
              max: 100,
              stepSize: 20
            }
          }]
        },
        onClick (MouseEvent, chartInfo) {
          console.log(MouseEvent)
          console.log(chartInfo)
          console.log(chartInfo[0]._index)
          console.log(chartInfo[0]._datasetIndex)
          that.indexDate = chartInfo[0]._index
          that.datasetIndex = chartInfo[0]._datasetIndex
          console.log(that.indexDate)
          console.log(that.datasetIndex)
          that.clickPoint()
        }
      }
    })
  },
  methods: {
    clickPoint () {
      this.$router.push({
        name: 'ChartInfo',
        params: {
          indexDate: this.indexDate,
          datasetIndex: this.datasetIndex
        }
      })
    }
  }
}
</script>

END