update

src/components/echarts/LineChart.vue

+<template>
+    <chart-el :chartOpt="chartConf" />
+</template>
+
+<script>
+import mixinChart from 'runner/common/mixins/mixinChart'
+
+export default {
+    name: 'LineChart',
+
+    mixins: [mixinChart],
+
+    data () {
+        return {
+            chartConf: {}
+        }
+    },
+
+    props: {
+        // 图表布局配置 - width, height
+        layout: {
+            type: Object,
+            default () {
+                return {
+                    width: '100%',
+                    height: '160px'
+                }
+            }
+        },
+
+        // 图表配置
+        option: {
+            type: Object,
+            default () {
+                return {
+                    base: {},
+                    seriesData: []
+                }
+            }
+        }
+    },
+
+    mounted () {
+        this.initComponents()
+    },
+
+    methods: {
+        initComponents () {
+            const { width = '100%', height = '160px' } = this.layout
+            const option = this.getChartOption() || {}
+            this.chartConf = {
+                width,
+                height,
+                option
+            }
+        },
+
+        /**
+         * @method getSeriesData 图表数据
+         */
+        getSeriesData () {
+            const defSeriesOpts = {
+                type: 'line',
+                symbol: 'circle',
+                symbolSize: 4,
+                lineStyle: {
+                    width: 2,
+                    shadowOffsetX: 5,
+                    shadowOffsetY: 3,
+                    shadowBlur: 20
+                },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [{
+                            offset: 0, color: 'rgba(36, 139, 255, 0.85)' // 0% 处的颜色
+                        }, {
+                            offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
+                        }],
+                        global: false // 缺省为 false
+                    }
+                },
+                data: []
+            }
+
+            let result = [defSeriesOpts]
+            const { seriesData = [] } = this.option
+            if (seriesData.length) {
+                const temp = []
+                seriesData.forEach(item => {
+                    temp.push(this.deepMerge({}, defSeriesOpts, item))
+                })
+                result = temp
+            }
+
+            return result
+        },
+
+        /**
+         * @method getSeriesData 图表数据
+         */
+        getChartOption () {
+            const defaultColors = ['#00BEFF', '#00DE7D']
+            const defaultOption = {
+                color: defaultColors,
+                title: {
+                    show: false
+                },
+                legend: {
+                    icon: 'circle',
+                    itemWidth: 8,
+                    itemHeight: 8,
+                    top: '-2%',
+                    right: '0%',
+                    itemGap: 40,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 14,
+                        fontFamily: 'MicrosoftYaHei'
+                    },
+                    data: []
+                },
+                tooltip: {
+                    trigger: 'item',
+                    position: 'top',
+                    padding: [3, 5],
+                    borderColor: '#3EB9FF',
+                    backgroundColor: '#1771B8',
+                    textStyle: {
+                        height: 12,
+                        fontSize: 14,
+                        color: '#fff'
+                    },
+                    formatter (item) {
+                        return item.value
+                    }
+                },
+                grid: {
+                    left: 0,
+                    right: 30,
+                    bottom: 0,
+                    top: 20,
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    // 两边留白
+                    boundaryGap: false,
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 14,
+                            fontFamily: 'CenturyGothic',
+                            fontWeight: 400,
+                            color: '#469CCC'
+                        }
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#3EB9FF',
+                            opacity: 0.3
+                        }
+                    },
+                    data: []
+                },
+                yAxis: {
+                    type: 'value',
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#9CBCF9',
+                            opacity: 0.5
+                        }
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 14,
+                            fontFamily: 'CenturyGothic',
+                            fontWeight: 400,
+                            color: '#469CCC'
+                        }
+                    }
+                }
+            }
+            // 添加series
+            const result = this.deepMerge({}, defaultOption, this.option.base)
+            result.series = this.getSeriesData()
+
+            return result
+        }
+    }
+}
+</script>