chartjs在vue2中的使用demo

<template>
  <div>
    <div style="display:inline-block">
      <canvas id="myChartBar" width="600" height="400"></canvas>
    </div>
    <div style="display:inline-block">
      <canvas id="myChartLine" width="600" height="400"></canvas>
    </div>
    <div>
      <canvas id="myChartPie" width="600" height="400"></canvas>
    </div>
  </div>
</template>

<script>
import Chart from 'chart.js/auto'
export default {
  name: 'ChartDemo',
  data () {
    return {}
  },
  methods: {
    initChartBar () {
      var ctx = document.getElementById("myChartBar");
      new Chart(ctx, {
          type: 'bar',
          data: {
              labels: ["1月","2月"],
              datasets: [
                {
                  label: 'one', // 系列名： 
                  data: [12, 19], // 数值
                  backgroundColor: 'red', // 背景颜色
                  hoverBackgroundColor: 'black', // 鼠标经过时背景颜色
                  borderWidth: 2, // 边框宽度
                  borderColor: 'black', // 边框颜色
                  hoverBorderColor: 'black', // 鼠标经过时边框颜色
                  borderAlign:'inner', // 边框对齐方式：'center'(default)|'inner'
              },
              {
                  label: 'two',// 系列名： 
                  data: [40, 60], // 数值
                  barThickness: 20, // 柱状的粗度
                  maxBarThickness: 30, // 柱状的最大粗度
                  backgroundColor: 'blue', // 背景颜色
                  hoverBackgroundColor: 'black', // 鼠标经过时背景颜色
                  borderWidth: 2, // 边框宽度
                  hoverBorderWidth: 10, // 鼠标经过时边框宽度
                  borderRadius: 10, // 边框圆角
                  hoverBorderRadius: 10, // 鼠标经过时边框圆角
                  borderColor: 'black', // 边框颜色
                  hoverBorderColor: 'black', // 鼠标经过时边框颜色
              },
            ]
          },
          options: {
            responsive: false, // 响应式
            plugins: {
              customCanvasBackgroundColor:{
                color: 'lightGreen'
              },
              title: {
                display: true, // 默认false
                align: 'start', // 默认是center,其它值有:start,end
                text: '这是title', // 文本
                color: 'red', // 字体颜色
                padding: 5, // 内边距，数字，或者写成{ bottom: number ; top: number }
                position: 'top', //默认top,其它值有： "left" | "top" | "bottom" | "right"
                fullSize: true, // 默认true, 此框应占用画布的全宽,如果是false, 方框放在图表区域的上方/旁边
                font: {
                  size: 45,   // default:12
                  family: 'Helvetica Neue',  // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                  style: 'italic', // 默认normal, italic, oblique, initial, inherit
                  weight: 'bold', //  normal | bold | bolder | lighter
                  lineHeight: 1.2 // default: 1.2
                }
              },
              subtitle: {
                display: true, // 默认false
                align: 'start', // 默认是center,其它值有:start,end
                text: '这是subtitle', // 文本
                color: '#999', // 字体颜色
                padding: 5, // 内边距，数字，或者写成{ bottom: number ; top: number }
                position: 'top', //默认top,其它值有： "left" | "top" | "bottom" | "right"
                fullSize: true, // 默认true, 此框应占用画布的全宽,如果是false, 方框放在图表区域的上方/旁边
                font: {
                  size: 30,   // default:12
                  family: 'Helvetica Neue',  // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                  style: 'normal', // 默认normal, italic, oblique, initial, inherit
                  weight: 'normal', //  normal | bold | bolder | lighter
                  lineHeight: 1.2 // default: 1.2
                }
              },
              tooltip: {
                enabled: true, // 是否启用，默认true
                backgroundColor: 'rgba(0, 0, 0, 0.8)', // 背景颜色
                titleColor: 'yellow', // 标题颜色
                titleFont: {
                  size: 50,   // default:12
                  family: 'Helvetica Neue',  // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                  style: 'italic', // 默认normal, italic, oblique, initial, inherit
                  weight: 'bold', //  normal | bold | bolder | lighter
                  lineHeight: 1.2 // default: 1.2
                },
                titleAlign: 'left', //标题对齐： 'left' (default),'right','center'
                titleMarginBottom: 6, // title底部的外间距
                bodyColor: 'green', // 主体颜色
                bodyFont: {
                  size: 50,   // default:12
                  family: 'Helvetica Neue',  // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                  style: 'italic', // 默认normal, italic, oblique, initial, inherit
                  weight: 'bold', //  normal | bold | bolder | lighter
                  lineHeight: 1.2 // default: 1.2
                },
                bodyAlign: 'left', //主体对齐： 'left' (default),'right','center'
                borderColor: 'rgba(0, 0, 0, 0)', // 边框颜色
                borderWidth: 2, // 边框宽度
                padding: 10,
                pointStyle:'rectRounded',
                usePointStyle: true
              },
              legend: {
                display: true, // true(default),false
                position: 'top', //'top'(default),'left','bottom','right','chartArea'
                align: 'center',  //'center'(default),'start','center','end'
                maxHeight: 100, // 最大高度
                maxWidth: 100, // 最大宽度
                onClick: () => {}, // 点击事件
                onHover: () => {}, // 经过
                onLeave: () => {}, // 离开
                reverse: false, // false(default),true时和dataset顺序相反
                // legend title
                title: {
                  color: 'red',
                  display: true,
                  padding: 10,
                  font: {}, // 字体和title中完全一致
                  text: 'legend title'
                }
              },

            },
            // animation: false, // 动画
            animation: {
              duration: 1000,
              easing:'linear',  // 过渡效果
              delay: 1000, // 毫秒，延时多久后显示动画
              loop: false, // 如果true, 动画将一直循环播
              onProgress: () => {console.log('ing')}, // 动画进行中事件
              onComplete: () => {console.log('done')}, // 动画完成事件
            },
            scales: {
              x: {
                display: true, // 默认true
                // x轴刻度相关内容
                ticks: {
                  display: true, // 默认true
                  color:'red', // 颜色
                  font: {}, // 字体和title中完全一致
                },
                position: 'left',
                title: {
                  display: true, // 默认false
                  text: 'Value',
                  color: '#191',
                  font: {
                    family: 'Times',
                    size: 20,
                    style: 'normal',
                    lineHeight: 1.2
                  },
                  padding: {top: 30, left: 0, right: 0, bottom: 0}
                },
                grid: {
                  display: true, // 是否显示，默认false
                  color:'green',
                  lineWidth: 2
                }
              },
              y: {
                display: true, // 默认true
                min: 0, // 最小值
                max: 200, // 最大值
                // y轴刻度相关内容
                ticks: {
                  display: true, // 默认true
                  color:'red', // 颜色
                  font:{},  // 字体和title中完全一致
                },
                position: 'left', //定位：left(default),right
                title: {
                  display: true, // 默认false
                  text: 'Value', // 文本
                  color: '#191', // 颜色
                  font: {
                    family: 'Times', 
                    size: 20,
                    style: 'normal',
                    lineHeight: 1.2
                  },
                  padding: {top: 30, left: 0, right: 0, bottom: 0}
                },
                grid: {
                  display: true, // 是否显示，默认true
                  color: 'red',
                  lineWidth: 2
                }
              },
              
            }
          }
      });
    },
    initChartLine () {
      var ctx = document.getElementById("myChartLine");
      new Chart(ctx, {
          type: 'line',
          data: {
              labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
              datasets: [
                {
                  label: 'one',
                  data: [12, 19, 32, 15, 62, 43], // 数值
                  fill: false, // 是否填充区域
                  borderWidth: 8,
                  borderColor: "red", // 背景颜色
                  hoverBorderColor: 'black', // 鼠标经过时背景颜色
              },
              {
                  label: 'two', // 系列名
                  data: [32, 59, 13, 75, 27, 13], // 数值
                  showLine: true, // 是否显示线，默认true
                  borderWidth: 2, // 边框宽度,即折线线的宽度
                  borderColor: "green", // 边框颜色
                  fill: true, // 是否填充，默认false,背景颜色即填充颜色
                  backgroundColor: 'yellow', // fill为true时生效, 背景颜色即填充颜色
                  pointStyle:'triangle', // 拐点样式，其它值有：'circle'(圆)、'cross'(十字)、'crossRot'(叉)、'dash'(短横杠),'line'(长横线),'rect'(矩形),'rectRounded'(圆角矩型),'rectRot'(菱形),'star'星星,'triangle'(三角形),false,
                  pointBackgroundColor: 'orange', // 拐点背景颜色
                  pointBorderColor: '#666', // 拐点边框颜色
                  pointBorderWidth: 20, // 拐点边框宽度
                  pointRotation: 30, // 拐点旋转角度
                  pointRadius: 5 //拐点半径
                },
            ]
          },
          options: {
            responsive: false, // 响应式
            plugins: {
              customCanvasBackgroundColor:{
                color: 'lightGreen'
              },
              tooltip: {
                enabled: true, // 是否启用，默认true
                backgroundColor: 'rgba(0, 0, 0, 0.8)', // 背景颜色
                titleColor: 'yellow', // 标题颜色
                titleFont: {
                  size: 50,   // default:12
                  family: 'Helvetica Neue',  // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                  style: 'italic', // 默认normal, italic, oblique, initial, inherit
                  weight: 'bold', //  normal | bold | bolder | lighter
                  lineHeight: 1.2 // default: 1.2
                },
                titleAlign: 'left', //标题对齐： 'left' (default),'right','center'
                titleMarginBottom: 6, // title底部的外间距
                bodyColor: 'green', // 主体颜色
                bodyFont: {
                  size: 50,   // default:12
                  family: 'Helvetica Neue',  // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                  style: 'italic', // 默认normal, italic, oblique, initial, inherit
                  weight: 'bold', //  normal | bold | bolder | lighter
                  lineHeight: 1.2 // default: 1.2
                },
                bodyAlign: 'left', //主体对齐： 'left' (default),'right','center'
                borderColor: 'rgba(0, 0, 0, 0)', // 边框颜色
                borderWidth: 2, // 边框宽度
                padding: 10
              },
              legend: {
                display: true, // true(default),false
                position: 'top', //'top'(default),'left','bottom','right','chartArea'
                align: 'center',  //'center'(default),'start','center','end'
                // 图例标签
                labels: {
                  color:'purple', // 标签颜色
                  boxWidth: 100, // 盒宽度(文字前面的图标)
                  boxHeight: 100, // 盒高度(文字前面的图标)
                  font: {},
                  padding: 10, //默认10
                  textAlign: 'center', //对齐方式 'center'(default),'left', 'right'
                  pointStyle : 'crossRot', // 点样式，文字前面的图标，usePointStyle为true时才生效,其它值有：'circle'(圆)、'cross'(十字)、'crossRot'(叉)、'dash'(短横杠),'line'(长横线),'rect'(矩形),'rectRounded'(圆角矩型),'rectRot'(菱形),'star'星星,'triangle'(三角形),false,
                  usePointStyle: true, // 是否使用点样式，默认false
                },
                maxHeight: 100, // 最大高度
                maxWidth: 100, // 最大宽度
                onClick: () => {}, // 点击事件
                onHover: () => {}, // 经过
                onLeave: () => {}, // 离开
                reverse: false, // false(default),true时和dataset顺序相反
                // legend title
                title: {
                  color: 'red',
                  display: true,
                  padding: 10,
                  font: {}, // 字体和title中完全一致
                  text: 'legend title'
                }
              },

            },
            // animation: false, // 动画
            animation: {
              duration: 1000,
              easing:'linear',  // 过渡效果
              delay: 1000, // 毫秒，延时多久后显示动画
              loop: false, // 如果true, 动画将一直循环播
              onProgress: () => {console.log('ing')}, // 动画进行中事件
              onComplete: () => {console.log('done')}, // 动画完成事件
            },
            scales: {
              x: {
                display: true, // 默认true
                // x轴刻度相关内容
                ticks: {
                  display: true, // 默认true
                  color:'red', // 颜色
                  font: {}, // 字体和title中完全一致
                },
                position: 'top',
                title: {
                  display: true, // 默认false
                  text: 'Value',
                  color: '#191',
                  font: {
                    family: 'Times',
                    size: 20,
                    style: 'normal',
                    lineHeight: 1.2
                  },
                  padding: {top: 30, left: 0, right: 0, bottom: 0}
                },
                grid: {
                  display: true, // 是否显示
                }
              },
              y: {
                display: true, // 默认true
                min: 0, // 最小值
                max: 200, // 最大值
                // y轴刻度相关内容
                ticks: {
                  display: true, // 默认true
                  color:'red', // 颜色
                  font:{},  // 字体和title中完全一致
                },
                position: 'right', //定位：left(default),right
                title: {
                  display: true, // 默认false
                  text: 'Value', // 文本
                  color: '#191', // 颜色
                  font: {
                    family: 'Times', 
                    size: 20,
                    style: 'normal',
                    lineHeight: 1.2
                  },
                  padding: {top: 30, left: 0, right: 0, bottom: 0}
                },
                grid: {
                  display: false, // 是否显示
                }
              },
            }

          }
      });
    },
    initChartPie () {
      var ctx = document.getElementById("myChartPie");
      new Chart(ctx, {
          type: 'pie',
          data: {
              labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
              datasets: [
                {
                  // label: 'one',
                  data: [12, 19, 3, 5, 2, 3],
                  backgroundColor: ["red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                  hoverBackgroundColor: 'black',
                  offset:100,
                  hoverOffset: 0,
                  borderWidth: 2,
                  borderColor: 'black',
                  hoverBorderColor: 'black',
                  borderAlign:'center'
              },
            ]
          },
          options: {
            responsive: false, // 响应式
            plugins: {
              customCanvasBackgroundColor:{
                color: 'lightGreen'
              },
              tooltip: {
                enabled: true, // 是否启用，默认true
                backgroundColor: 'rgba(0, 0, 0, 0.8)', // 背景颜色
                titleColor: 'yellow', // 标题颜色
                titleFont: {
                  size: 50,   // default:12
                  family: 'Helvetica Neue',  // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                  style: 'italic', // 默认normal, italic, oblique, initial, inherit
                  weight: 'bold', //  normal | bold | bolder | lighter
                  lineHeight: 1.2 // default: 1.2
                },
                titleAlign: 'left', //标题对齐： 'left' (default),'right','center'
                titleMarginBottom: 6, // title底部的外间距
                bodyColor: 'green', // 主体颜色
                bodyFont: {
                  size: 50,   // default:12
                  family: 'Helvetica Neue',  // default:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                  style: 'italic', // 默认normal, italic, oblique, initial, inherit
                  weight: 'bold', //  normal | bold | bolder | lighter
                  lineHeight: 1.2 // default: 1.2
                },
                bodyAlign: 'left', //主体对齐： 'left' (default),'right','center'
                borderColor: 'rgba(0, 0, 0, 0)', // 边框颜色
                borderWidth: 2, // 边框宽度
                padding: 10
              },
              legend: {
                display: true, // true(default),false
                position: 'top', //'top'(default),'left','bottom','right','chartArea'
                align: 'center',  //'center'(default),'start','center','end'
                // 图例标签
                labels: {
                  color:'purple', // 标签颜色
                  boxWidth: 100, // 盒宽度(文字前面的图标)
                  boxHeight: 100, // 盒高度(文字前面的图标)
                  font: {},
                  padding: 10, //默认10
                  textAlign: 'center', //对齐方式 'center'(default),'left', 'right'
                  pointStyle : 'rectRot', // 点样式，文字前面的图标，usePointStyle为true时才生效,其它值有：'circle'(圆)、'cross'(十字)、'crossRot'(叉)、'dash'(短横杠),'line'(长横线),'rect'(矩形),'rectRounded'(圆角矩型),'rectRot'(菱形),'star'星星,'triangle'(三角形),false,
                  usePointStyle: true, // 是否使用点样式，默认false
                },
                maxHeight: 100, // 最大高度
                maxWidth: 100, // 最大宽度
                onClick: () => {}, // 点击事件
                onHover: () => {}, // 经过
                onLeave: () => {}, // 离开
                reverse: false, // false(default),true时和dataset顺序相反
                // legend title
                title: {
                  color: 'red',
                  display: true,
                  padding: 10,
                  font: {}, // 字体和title中完全一致
                  text: 'legend title'
                }
              },

            },
            // animation: false, // 动画
            animation: {
              duration: 1000,
              easing:'linear',  // 过渡效果
              delay: 1000, // 毫秒，延时多久后显示动画
              loop: false, // 如果true, 动画将一直循环播
              onProgress: () => {console.log('ing')}, // 动画进行中事件
              onComplete: () => {console.log('done')}, // 动画完成事件
            },
          }
      });
    },
  },
  mounted () {
    this.initChartBar();
    this.initChartLine();
    this.initChartPie();
  }
}
</script>
<style scoped>
</style>