vue-chartjs 图表库配置及使用

官网

• 官方文档 使用Chart.js和Vue.js简单漂亮的图表
• github/vue-chartjs

vue-chartjs 是基于 Chart.js 实现的 vue 版本

npm

npm install vue-chartjs chart.js --save

组件

Bar
HorizontalBar
Doughnut
Line
Pie
PolarArea
Radar
Bubble
Scatter
mixins
generateChert

引用

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    this.renderChart(data, options)
  }
}

this.renderChart()方法由Bar组件提供，接收两个对象参数。第一个是你的图表数据，第二个是配置对象。在这个文档中查看你需要提供的对象结构Chart.js docs。

export default {
    extends: Bar,

    props: [
        'data',
        'max',
        'min',
    ],
    mounted() {
        const {
            labels,
            data,
            bgColors,
        } = (this as any)
        .data.chartData;

        const thisTitle = (this as any).data.label;
        const units = (this as any).data.unit && (this as any).data.unit.data.find((i: any) => i);
        const tableTitle = this.$t(thisTitle) + '(' + (units) + ')';

        // const max = (this as any).data.max;
        const maxVal = Number(Math.max.apply(null, this.data.chartData.data)) * 1.2;
        const max =  Math.ceil(maxVal);
        const min = 0;

        const datacollection = {
            labels,
            datasets: [{
                backgroundColor: bgColors,
                data,
            } ],
        };

        const options: any = {
            animation: {
                duration: 100,
                onComplete: function() {
                    const chartInstance = (this as any).chart;
                    const ctx = chartInstance.ctx;
                    // ctx.font = Chart.helpers.fontString(
                    //     Chart.defaults.global.defaultFontSize,
                    //     Chart.defaults.global.defaultFontStyle,
                    //     Chart.defaults.global.defaultFontFamily
                    // );
                    ctx.textAlign = 'center';
                    // ctx.textBaseline = "bottom";
                    // ctx.fillStyle = "#F5A623";
                    (this as any).data.datasets.forEach(function(dataset, i) {
                    const meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function(bar, index) {
                        ctx.fillText(
                        `${dataset.data[index]}`,
                        bar._model.x,
                        bar._model.y - 5,
                        );
                    });
                    });
                },
            },
            bars: {
                maxBarThickness: 20,
            },
            events: ['null'],
            responsive: true,
            maintainAspectRatio: true,
            legend: {
                display: false,
                position: 'top', // 显示的位置
                fullWidth: 'true',
     
                //   labels:{ //图例标签配置
                //         boxWidth:10 ,//彩色框的宽度
                //         fontSize:"20", //文本的字体大小
                //         fontStyle:"normal" //字体风格
                //         fontColor："red" , // 文本的颜色
                //         padding:10 //填充行之间的彩色框
                //         fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" //字体家族
                //        usePointStyle:false //标签样式将匹配相应的点样式（大小基于
                //                    fontSize，在这种情况下不使用boxWidth）  
                //     
                // }        
            },
             title: {                
                display: true,
                text: tableTitle,
                position: 'top',
                // fontSize:20,   //字体大小 默认为12px
                // fontFamily:"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" //字体家族文本
                // fontColor:'#666'
                // fontStyle:'bold' //字体样式 
                // padding:10 //在标题文本上方和下方添加的像素数量
                // lineHeight:10 //单行文本的高度 
            },
            tooltips: {
                enabled: true,
                mode: 'point',
            },
            scales: {
                yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true,
                        fontSize: 11,
                        max,
                        min,
                        fontColor: '#9E9E9E',
                    },
                }],
                xAxes: [{
                    barThickness: 18,
                    ticks: {
                        fontSize: 13,
                        fontColor: '#353535',
                    },
                }],
            },
        };

        (this as any)
        .renderChart(datacollection, options);
    },
};