前言

在开发过程中会遇到数据的可视化展示，使用Chart.js 在Vue 搭建后台管理做视图呈现感觉是比较好用的插件，这个插件是一个基于 JavaScript 的开源可视化图表库

Chart.js官网连接：

效果图vue2中使用Chart.js1、在项目中安装Chart.js 组件

npm install chart.js

<template>  <Bar    :chart-data="chartData"    :chart-id="chartId"    :chart-options="chartOptions"    :css-classes="cssClasses"    :dataset-id-key="datasetIdKey"    :height="height"    :plugins="plugins"    :styles="styles"    :width="width"  />  <el-button type="primary">Ran</el-button></template><script>  import { Bar } from 'vue-chartjs'  import {    Chart as ChartJS,    Title,    Tooltip,    Legend,    BarElement,    CategoryScale,    LinearScale,  } from 'chart.js'  ChartJS.register(    Title,    Tooltip,    Legend,    BarElement,    CategoryScale,    LinearScale  )  // const utils = require('@/utils/utils')  export default {    name: 'BarChart',    components: { Bar },    props: {      chartId: {        type: String,        default: 'bar-chart',      },      datasetIdKey: {        type: String,        default: 'label',      },      width: {        type: Number,        default: 100,      },      height: {        type: Number,        default: 50,      },      cssClasses: {        default: '',        type: String,      },      styles: {        type: Object,        default: () => {},      },      plugins: {        type: Array,        default: () => [],      },    },    data() {      return {        chartData: {          labels: [            '水星',            '金星',            '地球',            '火星',            '木星',            '土星',            '天王星',            '海王星',          ],          datasets: [            {              label: '行星卫星数量',              data: [0, 0, 1, 2, 79, 82, 27, 14],              backgroundColor: '#ffa0b4',              borderColor: '#ff6384',              borderWidth: 3,              borderRadius: 5,              borderSkipped: false,            },            {              label: '太阳系行星质量 (相对于太阳 x 10^-6)',              data: [                -16.6,                -208.1,                -300.3,                123,                954.792,                685.886,                243.662,                201.514,              ],              backgroundColor: '#9ad0f5',              borderColor: '#36a2eb',              borderWidth: 3,            },          ],        },        chartOptions: {          responsive: true,          plugins: {            legend: {              position: 'top',            },            title: {              display: true,              text: 'Chart.js Bar Chart',            },          },        },      }    },  }</script>

<template>  <Bar    :chart-data="chartData"    :chart-id="chartId"    :chart-options="chartOptions"    :css-classes="cssClasses"    :dataset-id-key="datasetIdKey"    :height="height"    :plugins="plugins"    :styles="styles"    :width="width"  />  <el-button type="primary" @click="handledetailpeizhi">Ran</el-button></template><script>  import { Bar } from 'vue-chartjs'  import { reactive, toRefs } from 'vue'  import {    Chart as ChartJS,    Title,    Tooltip,    Legend,    BarElement,    CategoryScale,    LinearScale,  } from 'chart.js'  ChartJS.register(    Title,    Tooltip,    Legend,    BarElement,    CategoryScale,    LinearScale  )  // const utils = require('@/utils/utils')  export default {    name: 'BarChart',    components: { Bar },    props: {      chartId: {        type: String,        default: 'bar-chart',      },      datasetIdKey: {        type: String,        default: 'label',      },      width: {        type: Number,        default: 100,      },      height: {        type: Number,        default: 50,      },      cssClasses: {        default: '',        type: String,      },      styles: {        type: Object,        default: () => {},      },      plugins: {        type: Array,        default: () => [],      },    },    setup() {      const data = reactive({        chartData: {          labels: [            '水星',            '金星',            '地球',            '火星',            '木星',            '土星',            '天王星',            '海王星',          ],          datasets: [            {              label: '行星卫星数量',              data: [0, 0, 1, 2, 79, 82, 27, 14],              backgroundColor: '#ffa0b4',              borderColor: '#ff6384',              borderWidth: 3,              borderRadius: 5,              borderSkipped: false,            },            {              label: '太阳系行星质量 (相对于太阳 x 10^-6)',              data: [                -16.6,                -208.1,                -300.3,                123,                954.792,                685.886,                243.662,                201.514,              ],              backgroundColor: '#9ad0f5',              borderColor: '#36a2eb',              borderWidth: 3,            },          ],        },        chartOptions: {          responsive: true,          plugins: {            legend: {              position: 'top',            },            title: {              display: true,              text: 'Chart.js Bar Chart',            },          },        },      })      const handledetailpeizhi = () => {        data.chartData.datasets = [          {            label: '行星卫星数量',            data: [              -16.6,              -208.1,              -300.3,              123,              954.792,              685.886,              243.662,              201.514,            ],            backgroundColor: '#ffa0b4',            borderColor: '#ff6384',            borderWidth: 3,            borderRadius: 5,            borderSkipped: false,          },          {            label: '太阳系行星质量 (相对于太阳 x 10^-6)',            data: [0, 0, 1, 2, 79, 82, 27, 14],            backgroundColor: '#9ad0f5',            borderColor: '#36a2eb',            borderWidth: 3,          },        ]      }      return {        ...toRefs(data),        handledetailpeizhi,      }    },</script>