Vue項目中使用highcharts-折線圖（配置）

Vue項目中使用highcharts-折線圖（配置）

效果圖：

1. 封裝lineChart組件

<template>
    <div class="chart">
        <div :id="id" class="chart-common" :data="data"></div>
    </div>
</template>

<script>
    import HighCharts from 'highcharts'
    export default {
        name: "chart",
        // 傳入id: 若一個頁面出現多個折線圖時，id必須不同
        // data: 折線圖配置數據
        props: ['id','data'],
        data() {
            return {
            }
        },
        created() {
        },
        mounted() {
            HighCharts.chart(this.id, this.data);
        }
    }
</script>

<style scoped lang="less">
    .chart {
        width: 100%;
        margin-top: 10px;
        .chart-common {
            height: 300px;
            border: 1px solid #e8eaec;
            padding: 3px;
            border-radius: 4px;
            transition: all 0.2s ease-in-out;
            &:hover {
                box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
                border-color: #eee;
            }
        }
    }
</style>

2. vue頁面文件中引用lineChart

// 1
import lineChart from './common/lineChart';
import { diskReadWriteNum } from "./access/chartsData";   // 折線圖靜態配置文件，放在一chartData.js中，防止代碼冗餘
// 2
components: {
    lineChart
}
// 3
<lineChart :id="chartId" :data="alarmtresChartData"></lineChart>
chartId: 'char-id',
alarmtresChartData:  Object.assign(diskReadWriteNum)  // 深拷貝一份
// 4 數據請求成功 只需要關注a、b、c即可
this.$request(config).then(({data: res}) => {
    if (res.success) {
    	
        let dateList = [];  // x軸數據
        let alarmNumList = [];  // 報警Y軸
        let earlyNumList = [];  // 預警Y軸
        
        if(type === 'alarm') {
            // 報警
            res.data.forEach(item => {
                let date = this.timestampToTimeLong(item.timestamp);
                dateList.push(date);
                alarmNumList.push(item.count);
            })
            // a
            this.alarmtresChartData.series[0].data = alarmNumList;
        } else {
            // 預警
            res.data.forEach(item => {
                let date = this.timestampToTimeLong(item.timestamp);
                dateList.push(date);
                earlyNumList.push(item.count);
            })
            // b
            this.alarmtresChartData.series[1].data = earlyNumList;
        }
        // c
        this.alarmtresChartData.xAxis.categories = dateList;
        // d 重新刷新div
        this.isReloadChart = false;  // 這裏見我另一篇文章，vue強制刷新某一個div
        this.$nextTick(() => {
            this.isReloadChart = true;
        })
    }
});

3. lineChart配置文件chartsData.js

const diskReadWriteNum = {
    credits: {
        enabled: false // 禁用版權信息
    },
    // 標題
    title: {
        text: '',
        useHTML: true,
        text: '<div style="font-weight: 700">' + window.i18nTool.$t('預警/報警個數趨勢圖')
            + '<span style="color: #999999">（' + window.i18nTool.$t('個') + '）</span></div>',
        align: 'left',
        // 水平對齊方式
        style: {
            fontSize: '12px',
            'font-weight': 700
        }
    },
    // 副標題
    subtitle: {
        text: ''
    },
    // X軸
    xAxis: {
        title: {
            text: ''
        },
        // 數據項
        categories: ['12:00:00', '13:10:00', '14:20:00', '15:30:00', '16:40:00', '17:50:00', '18:60:00', '19:70:00']
        // time = Date.UTC(2013,11,14,0,0,0,0);  // UTC格式時間戳
    },
    // Y軸
    yAxis: {
        title: {
            text: ''
        }
    },
    // 數據列
    series: [{
        name: window.i18nTool.$t('預警個數'),
        color: '#2d8cf0',
        data: [12, 34, 23, 35, 47, 32, 12, 19],
        // 線寬
        lineWidth: 1,
        cursor: 'pointer',
        // 鼠標樣式
        dashStyle: 'Solid' // 線條樣式
    }, {
        name: window.i18nTool.$t('報警個數'),
        color: '#5f299a',
        data: [8, 12, 69, 60, 17, 22, 59, 36],
        // 線寬
        lineWidth: 1,
        cursor: 'pointer',
        // 鼠標樣式
        dashStyle: 'Solid' // 線條樣式
    }],
    // 折現數據上的數據點
    plotOptions: {
        series: {
            marker: {
                radius: 2,
                // 大小
                enabled: false,
                states: {
                    // 狀態
                    hover: {
                        radius: 2,
                        lineWidthPlus: 1
                    }
                }
            }
        }
    },
    // 圖例（折線數據名字）
    legend: {
        itemStyle: {
            fontWeight: 400
        }
    },
    // 數據列配置 每條折現以不同圖標顯示（三角形、圓形等）
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            // pointStart: 2010  // 如果沒有爲數據列中提供x值，則pointStart定義要開始的值。
        }
    },
    tooltip: {
        shared: true,   // 鼠標滑過是否顯示全部數據
        crosshairs: false,  // true：鼠標滑過，爲長方形背景
        // axisPointer: {
        //     type: 'cross'
        // },
        // 配置鼠標劃過時標示線
        crosshairs: [
            // 橫向標示線
            {
                width: 1,
                color: '#ccc'
            },
            // 縱向標示線
            // {
            //     width: 1,
            //     color: 'green'
            // }
        ],
        // 時間格式化字符 默認會根據當前的數據點間隔取對應的值 當前圖表中數據點間隔爲 1天，所以配置 day 值即可
        // dateTimeLabelFormats: {
        //     day: '%Y-%m-%d'
        // }
    },
    // 響應式
    // responsive: {
    //     rules: [{
    //         // 響應條件
    //         condition: {
    //         },
    //         // 圖表配置
    //         chartOptions: {
    //         }
    //     }]
    // }

};

module.exports = {
    diskReadWriteNum
};