[mod]折线饼状图组件

src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/educationalWisdom/utils/LineEcharts.vue

@@ -0,0 +1,99 @@
+<template>
+    <div>
+        <!-- echart表格 -->
+        <div id="lineChart" :style="echartStyle"></div>
+    </div>
+</template>
+
+<script>
+    import * as echarts from 'echarts';
+    export default {
+        props: {
+            // 样式
+            echartStyle: {
+                type: Object,
+                default(){
+                    return {}
+                }
+            },
+            //类型（line-折线，area-基础面积，bar-柱形图）
+            isType: {
+                type: String,
+                default(){
+                    return "line"
+                }
+            },
+            xAxisData: {
+                type: Array,
+                default(){
+                    return []
+                }
+            },
+            yAxisData: {
+                type: Array,
+                default(){
+                    return []
+                }
+            },
+
+        },
+        data(){
+            return {
+                //
+            }
+        },
+
+        methods: {
+            drawLine(id) {
+                this.charts = echarts.init(document.getElementById(id));
+                this.charts.setOption({
+                    xAxis: {
+                        type: "category",
+                        boundaryGap: false,
+                        data: this.xAxisData,
+                    },
+                    yAxis: {
+                        type: "value",
+                    },
+                    series: [
+                        {
+                            data: this.yAxisData,
+                            type: this.isType==='area'?'line': this.isType,
+                            areaStyle: this.isType!=='area'?null:
+                                {
+                                    color:"#B9DDFF"
+                                },
+                            itemStyle : {
+                                normal : {
+                                    lineStyle:{
+                                        color:'#1890FF'
+                                    },
+                                }
+                            },
+                        },
+                    ],
+                    tooltip : {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross',
+                            label: {
+                                backgroundColor: '#6a7985'
+                            }
+                        }
+                    }
+                });
+            },
+        },
+        mounted() {
+            this.$nextTick(function() {
+                this.drawLine('lineChart')
+            })
+        },
+    };
+</script>
+
+<style scoped>
+    #lineChart{
+        width: 100%;
+    }
+</style>