一個簡單實用的基於echarts-折線圖的vue元件

效果圖

首先安裝echarts

• npm install echarts --save

元件程式碼

<template>
    <div class="line-echarts">
        <div class="line-echarts-ii" id="lineChart"></div>
    </div>
</template>

<script>
// 按需載入echarts 參考：https://github.com/apache/incubator-echarts/blob/master/index.js
// 使用require方式命名更方便一些
// 引入基本模板
let echarts = require('echarts/lib/echarts');
// 引入柱狀圖元件
// require('echarts/lib/chart/bar');
// 引入折線圖元件
require('echarts/lib/chart/line');

// 引入提示框
require('echarts/lib/component/tooltip');
// 引入title元件
// require('echarts/lib/component/title');
// 引入圖示
require("echarts/lib/component/legend");
export default {
    name: 'LineEcharts',
    props: {
        echartData: { // 折線名
            type: Array,
			default: () => [
                {
                    text: '自定義1',
                    color: '#456ef4', // 折線圖顏色
                    dataLsit: [120, 132, 101, 134, 90, 230, 210, 123], // 折線圖數值
                    getXAxis: ['週一','週二','週三','週四','週五','週六','週日','周八'] // 目前只支援一條橫座標
                },
                {
                    text: '自定義2',
                    color: '#3fe0c2',
                    dataLsit: [1210, 1132, 1101, 1134, 910, 2310, 2110, 1123],
                    getXAxis: ['週一','週二','週三','週四','週五','週六','週日','周八']
                },
                {
                    text: '自定義3',
                    color: 'red',
                    dataLsit: [120, 132, 1101, 134, 910, 210, 110, 1123],
                    getXAxis: ['週一','週二','週三','週四','週五','週六','週日','周八']
                }
            ] 
        }
    },
    data() {
        return {
            lineChart: {}
        }
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            // 基於準備好的dom，初始化echarts例項
            this.lineChart = echarts.init(document.getElementById('lineChart'));
            // 初始化資料 && 設定視窗自適應大小
            this.lineChart.setOption(this.echartOption, window.onresize = this.lineChart.resize); 
        }
    },
    watch: {
        echartOption(newVal, oldVal) {
            let newOption = JSON.stringify(newVal);
            let oldOption = JSON.stringify(oldVal);
            // newVal ，oldVal無function型別，故轉化為string來深層對比
            if (newOption !== oldOption) {
                // 資料更改時更新echart
                console.log('updateEchart');
                this.lineChart.setOption(this.echartOption);
            }
        }
    },
    computed: {
        echartOption() {
            let seriesArr = []
            this.echartData.forEach((item) => {
                seriesArr.push({
                        name: item.text,
                        type: 'line',
                        smooth: true, // 平滑
                        itemStyle : {
                            normal : {
                                color: item.color, // 設定折線折點顏色
                                lineStyle:{  
                                    color: item.color  // 設定折線線條顏色
                                }
                            }
                        },
                        data: item.dataLsit
                });
            });
            
            return { 
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    // x: '0px',圖示位置
                    y: '400px', 
                    data: this.echartData.map(item => item.text) // 圖示名字
                },
                grid: {  // echart四邊距離
                    top: '20px',
                    left: '1%',
                    right: '2%',
                    bottom: '30px',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.echartData[0].getXAxis // 橫座標都一樣。故取預設第一個
                },
                yAxis: {
                    type: 'value'
                },
                series: seriesArr
            }
        }
    }
}

</script>

<style scoped lang="less">
.line-echarts {
    .line-echarts-ii {
        width: 100%;
        height: 420px;
    }
}
</style>
複製程式碼

• 引入即可使用
• 歡迎關注