图表优化

src/components/echarts/lineChart.vue

@@ -1,182 +0,0 @@
-<template>
-    <div class="linechart" :id="id" style="width: 100%; height: 100%"></div>
-</template>
-
-<script>
-import echarts from "echarts";
-
-export default {
-    name: "lineChart",
-    props: {
-        id: {
-            default: "lineChart1",
-            type: String,
-        },
-        LineChartData: {
-            text: String, //标题  不需要标题可不传
-            titleSize: {
-                //标题大小
-                type: Number,
-                default: 20,
-            },
-            download: {
-                //是否显示下载按钮
-                type: Boolean,
-                default: false,
-            },
-            data: [],
-        },
-    },
-    data() {
-        return {
-            tipData: [], //线数据
-            showData: [], //展示数据
-            charts: "",
-            // text: this.LineChartData.text, //大标题
-            // titleSize: this.LineChartData.titleSize, //标题大小
-            // download: this.LineChartData.download,
-        };
-    },
-    computed: {
-        text() {
-            return this.LineChartData.text;
-        },
-        titleSize() {
-            return this.LineChartData.titleSize;
-        },
-        download() {
-            return this.LineChartData.download;
-        },
-    },
-    mounted() {
-        // this.drawLine();
-        // import * as echarts from "echarts";
-
-        // 基于准备好的dom，初始化echarts实例
-        this.charts = this.$echarts.init(document.getElementById(this.id));
-
-        let option = {
-            xAxis: {
-                data: ["A", "B", "C", "D", "E"],
-            },
-            yAxis: {},
-            series: [
-                {
-                    data: [10, 22, 28, 23, 19],
-                    type: "line",
-                    // smooth: true,
-                    lineStyle: {
-                        normal: {
-                            color: "#3397FF",
-                        },
-                    },
-                },
-            ],
-        };
-        this.charts.setOption(option);
-    },
-    methods: {
-        //绘制图表
-        drawLine() {
-            // 基于准备好的dom，初始化echarts实例
-            let id = "echartBar" + Math.random() * 1000;
-            this.$el.setAttribute("id", id);
-            let myChartContainer = document.getElementById(id);
-            // let myChartChina = echarts.init(myChartContainer);
-            let myChartChina = echarts.init("aa");
-            // 绘制图表
-            let optionMap = {
-                //折线图配置数据
-                color: ["#6cacaf", "#e4a526", "#e4391d", "#a1cb37", "#8c97cb"],
-                title: {
-                    x: "center",
-                    text: this.text,
-                    textStyle: {
-                        fontSize: this.titleSize,
-                    },
-                },
-                tooltip: {
-                    trigger: "axis",
-                },
-                legend: {
-                    top: [30],
-                    data: this.tipData,
-                },
-                grid: {
-                    left: "3%",
-                    right: "4%",
-                    bottom: "3%",
-                    containLabel: true,
-                },
-                toolbox: {
-                    show: this.download,
-                    top: [5],
-                    right: [20],
-                    feature: {
-                        saveAsImage: {},
-                    },
-                },
-                xAxis: {
-                    interval: ["0"], //标签显示间隔
-                    type: "category",
-                    boundaryGap: false,
-                    data: [
-                        "1月",
-                        "2月",
-                        "3月",
-                        "4月",
-                        "5月",
-                        "6月",
-                        "7月",
-                        "8月",
-                        "9月",
-                        "10月",
-                        "11月",
-                        "12月",
-                    ], //x轴数据
-                },
-                yAxis: {
-                    name: "(万元)",
-                    nameGap: [10],
-                    type: "value",
-                },
-                series: this.showData,
-            };
-            myChartChina.setOption(optionMap);
-            window.onresize = function () {
-                myChartChina.resize();
-            };
-        },
-    },
-    watch: {
-        "LineChartData.data": function (val) {
-            this.tipData = [];
-            this.showData = [];
-            for (let i = 0; i < val.length; i++) {
-                let obj = {
-                    //折线图需要的数据结构
-                    name: "",
-                    type: "line",
-                    data: [],
-                };
-                obj.name = val[i].name;
-                this.tipData.push(val[i].name);
-                for (let j = 0; j < val[i].monthlySales.length; j++) {
-                    obj.data.push(parseFloat(val[i].monthlySales[j]));
-                }
-                this.showData.push(obj);
-            }
-            this.drawLine();
-        },
-    },
-    destroyed() {
-        this.charts.dispose();
-    },
-};
-</script>
-
-<style lang='less' scoped>
-.linechart {
-    margin: 0 auto;
-}
-</style>

src/components/echarts/lineChart3.vue

@@ -1,211 +0,0 @@
-<template>
-    <div
-        class="linechart"
-        :id="id"
-        style="width: calc(100vw - 240px); height: calc(48vh - 165px)"
-    ></div>
-</template>
-
-<script>
-import echarts from "echarts";
-
-export default {
-    name: "lineChart",
-    props: {
-        id: {
-            default: "a",
-            type: String,
-        },
-        LineChartData: {
-            text: String, //标题  不需要标题可不传
-            titleSize: {
-                //标题大小
-                type: Number,
-                default: 20,
-            },
-            download: {
-                //是否显示下载按钮
-                type: Boolean,
-                default: false,
-            },
-            data: [],
-        },
-    },
-    data() {
-        return {
-            tipData: [], //线数据
-            showData: [], //展示数据
-            charts: "",
-            // text: this.LineChartData.text, //大标题
-            // titleSize: this.LineChartData.titleSize, //标题大小
-            // download: this.LineChartData.download,
-        };
-    },
-    computed: {
-        text() {
-            return this.LineChartData.text;
-        },
-        titleSize() {
-            return this.LineChartData.titleSize;
-        },
-        download() {
-            return this.LineChartData.download;
-        },
-    },
-    mounted() {
-        // this.drawLine();
-        // import * as echarts from "echarts";
-
-        // 基于准备好的dom，初始化echarts实例
-        this.charts = this.$echarts.init(document.getElementById(this.id));
-
-        let option = {
-            xAxis: {
-                type: "category",
-                boundaryGap: false,
-                data: [
-                    "星期一",
-                    "星期二",
-                    "星期三",
-                    "星期四",
-                    "星期五",
-                    "星期六",
-                    "星期日",
-                ],
-            },
-            yAxis: {},
-            series: [
-                {
-                    data: [30, 42, 48, 36, 39, 96, 51],
-                    type: "line",
-                    smooth: true,
-                    lineStyle: {
-                        normal: {
-                            color: "#3397FF",
-                        },
-                    },
-                    areaStyle: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            { offset: 0, color: "rgba(51, 151, 255, 0.7)" },
-                            { offset: 1, color: "rgba(170, 197, 255, 0.5)" },
-                        ]),
-                    },
-                },
-            ],
-            grid: {
-                top: "10%",
-                left: "20px",
-                right: "20px",
-                bottom: "10%",
-                containLabel: true,
-            },
-        };
-        this.charts.setOption(option);
-    },
-    methods: {
-        //绘制图表
-        drawLine() {
-            // 基于准备好的dom，初始化echarts实例
-            let id = "echartBar" + Math.random() * 1000;
-            this.$el.setAttribute("id", id);
-            let myChartContainer = document.getElementById(id);
-            // let myChartChina = echarts.init(myChartContainer);
-            let myChartChina = echarts.init("aa");
-            // 绘制图表
-            let optionMap = {
-                //折线图配置数据
-                color: ["#6cacaf", "#e4a526", "#e4391d", "#a1cb37", "#8c97cb"],
-                title: {
-                    x: "center",
-                    text: this.text,
-                    textStyle: {
-                        fontSize: this.titleSize,
-                    },
-                },
-                tooltip: {
-                    trigger: "axis",
-                },
-                legend: {
-                    top: [30],
-                    data: this.tipData,
-                },
-                grid: {
-                    left: "3%",
-                    right: "4%",
-                    bottom: "3%",
-                    containLabel: true,
-                },
-                toolbox: {
-                    show: this.download,
-                    top: [5],
-                    right: [20],
-                    feature: {
-                        saveAsImage: {},
-                    },
-                },
-                xAxis: {
-                    interval: ["0"], //标签显示间隔
-                    type: "category",
-                    boundaryGap: false,
-                    data: [
-                        "1月",
-                        "2月",
-                        "3月",
-                        "4月",
-                        "5月",
-                        "6月",
-                        "7月",
-                        "8月",
-                        "9月",
-                        "10月",
-                        "11月",
-                        "12月",
-                    ], //x轴数据
-                },
-                yAxis: {
-                    name: "(万元)",
-                    nameGap: [10],
-                    type: "value",
-                },
-                series: this.showData,
-            };
-            myChartChina.setOption(optionMap);
-            window.onresize = function () {
-                myChartChina.resize();
-            };
-        },
-    },
-    watch: {
-        "LineChartData.data": function (val) {
-            this.tipData = [];
-            this.showData = [];
-            for (let i = 0; i < val.length; i++) {
-                let obj = {
-                    //折线图需要的数据结构
-                    name: "",
-                    type: "line",
-                    data: [],
-                };
-                obj.name = val[i].name;
-                this.tipData.push(val[i].name);
-                for (let j = 0; j < val[i].monthlySales.length; j++) {
-                    obj.data.push(parseFloat(val[i].monthlySales[j]));
-                }
-                this.showData.push(obj);
-            }
-            this.drawLine();
-        },
-    },
-    destroyed() {
-        console.log("destroyed");
-        this.charts.dispose();
-    },
-};
-</script>
-
-
-<style lang='less' scoped>
-.linechart {
-    margin: 0 auto;
-}
-</style>

src/components/echarts/lineChart1.vue → src/components/echarts/lineChartMainPage.vue

@@ -10,10 +10,10 @@
 import echarts from "echarts";
 
 export default {
-    name: "lineChart",
+    name: "lineChartMainPage",
     props: {
         id: {
-            default: "a",
+            default: "lineChartMainPageA",
             type: String,
         },
         LineChartData: {

src/components/echarts/lineChartA.vue → src/components/echarts/lineChartMainPageA.vue

@@ -10,10 +10,10 @@
 import echarts from "echarts";
 
 export default {
-    name: "lineChartA",
+    name: "lineChartMainPageA",
     props: {
         id: {
-            default: "lineChartA",
+            default: "lineChartMainPageA",
             type: String,
         },
         dataList: {
@@ -59,6 +59,7 @@ export default {
                         //提示的字体样式
                         color: "#ffffff",
                     },
+                    confine: true,
                 },
                 xAxis: {
                     type: "category",
@@ -162,5 +163,6 @@ export default {
 <style lang='less' scoped>
 .linechart {
     margin: 0 auto;
+    overflow: hidden;
 }
 </style>

src/components/echarts/lineChartTaskInfo.vue

@@ -126,5 +126,6 @@ export default {
 <style lang='less' scoped>
 .linechart {
     margin: 0 auto;
+    overflow: hidden;
 }
 </style>

src/components/echarts/pieChart2.vue

@@ -1,55 +0,0 @@
-<template>
-    <div class="linechart" id="dd"></div>
-</template>
-
-<script>
-//import  from '';
-
-export default {
-    name: "pieChart", //
-    components: {},
-    data() {
-        return {};
-    },
-
-    computed: {},
-
-    methods: {},
-
-    mounted() {
-        // 基于准备好的dom，初始化echarts实例
-        let myChart = this.$echarts.init(document.getElementById("dd"));
-
-        let option = {
-            series: [
-                {
-                    type: "pie",
-                    data: [
-                        {
-                            value: 335,
-                            name: "直接访问",
-                        },
-                        {
-                            value: 234,
-                            name: "联盟广告",
-                        },
-                        {
-                            value: 1548,
-                            name: "搜索引擎",
-                        },
-                    ],
-                },
-            ],
-        };
-        myChart.setOption(option);
-    },
-};
-</script>
-
-<style lang='less' scoped>
-.linechart {
-    width: 100%;
-    height: 120px;
-    margin: 0 auto;
-}
-</style>

src/components/echarts/pieChartA.vue → src/components/echarts/pieChartMainPage.vue

@@ -10,7 +10,7 @@
 //import  from '';
 
 export default {
-    name: "pieChart", //
+    name: "pieChartMainPage", //
     components: {},
     data() {
         return {
@@ -35,7 +35,7 @@ export default {
 
     props: {
         id: {
-            default: "a",
+            default: "pieChartMainPage",
             type: String,
         },
         seriesName: {
@@ -92,6 +92,7 @@ export default {
                         //提示的字体样式
                         color: "#ffffff",
                     },
+                    confine: true,
                 },
                 series: [
                     {
@@ -142,5 +143,6 @@ export default {
 <style lang='less' scoped>
 .linechart {
     margin: 0 auto;
+    overflow: hidden;
 }
 </style>

src/components/echarts/pieChart.vue → src/components/echarts/pieChartProjectInfo.vue

@@ -6,7 +6,7 @@
 //import  from '';
 
 export default {
-    name: "pieChart", //
+    name: "pieChartProjectInfo", //
     components: {},
     data() {
         return {
@@ -31,7 +31,7 @@ export default {
 
     props: {
         id: {
-            default: "a",
+            default: "pieChartProjectInfo",
             type: String,
         },
         seriesName: {
@@ -88,6 +88,7 @@ export default {
                         //提示的字体样式
                         color: "#ffffff",
                     },
+                    confine: true,
                 },
                 series: [
                     {
@@ -124,5 +125,6 @@ export default {
 <style lang='less' scoped>
 .linechart {
     margin: 0 auto;
+    overflow: hidden;
 }
 </style>

src/main.js

@@ -17,12 +17,10 @@ import '@/lib/util.js'
 
 Vue.config.productionTip = false;
 
-// 引入echarts
-import echarts from 'echarts'
+import echarts from 'echarts' // 引入echarts
 
 Vue.prototype.$echarts = echarts
 
-
 Vue.use(ElementUI);
 
 new Vue({

src/views/mainPage.vue

@@ -74,7 +74,9 @@
                     <div class="titlePanelBor">日访问人数</div>
                 </div>
                 <div class="chartABox shadowBox">
-                    <line-chart1 id="lineA"></line-chart1>
+                    <line-chart-main-page
+                        id="lineA">
+                    </line-chart-main-page>
                 </div>
             </div>
 
@@ -136,18 +138,18 @@
                     >
                         <el-tab-pane label="运行项目" name="1">
                             <div class="chartBBox shadowBox">
-                                <line-chartA
+                                <line-chart-main-page-a
                                     id="runProjectLine"
                                     :dataList="runProjectList"
-                                ></line-chartA>
+                                ></line-chart-main-page-a>
                             </div>
                         </el-tab-pane>
                         <el-tab-pane label="运行任务" name="2">
                             <div class="chartBBox shadowBox">
-                                <line-chartA
+                                <line-chart-main-page-a
                                     id="runTaskLine"
                                     :dataList="runTaskList"
-                                ></line-chartA>
+                                ></line-chart-main-page-a>
                             </div>
                         </el-tab-pane>
                     </el-tabs>
@@ -162,34 +164,34 @@
                     <div class="shadowBox">
                         <div class="title">项目运行状态统计</div>
                         <div class="pieBox">
-                            <pie-chartA
+                            <pie-chart-main-page
                                 id="mainPagePieA"
                                 :dataList="dataListA"
                                 stateName="nowRunState"
                                 seriesName="项目运行状态统计"
-                            ></pie-chartA>
+                            ></pie-chart-main-page>
                         </div>
                     </div>
                     <div class="shadowBox shadowBoxB">
                         <div class="title">任务运行状态统计</div>
                         <div class="pieBox">
-                            <pie-chartA
+                            <pie-chart-main-page
                                 id="mainPagePieB"
                                 :dataList="dataListB"
                                 stateName="runState"
                                 seriesName="任务运行状态统计"
-                            ></pie-chartA>
+                            ></pie-chart-main-page>
                         </div>
                     </div>
                     <div class="shadowBox">
                         <div class="title">评测等级分布</div>
                         <div class="pieBox">
-                            <pie-chartA
+                            <pie-chart-main-page
                                 id="mainPagePieC"
                                 :dataList="dataListC"
                                 stateName="evaluationLevel"
                                 seriesName="评测等级分布"
-                            ></pie-chartA>
+                            ></pie-chart-main-page>
                         </div>
                     </div>
                 </div>
@@ -201,26 +203,18 @@
 <script>
 import toolbarTab from "@/components/toolbar/toolbarTab";
 import tableList from "@/components/grid/TableList";
-import LineChart from "../components/echarts/lineChart";
-import LineChart1 from "../components/echarts/lineChart1";
-import lineChartA from "../components/echarts/lineChartA";
-import LineChart3 from "../components/echarts/lineChart3";
-import pieChart from "../components/echarts/pieChart";
-import pieChartA from "../components/echarts/pieChartA";
-import pieChart2 from "../components/echarts/pieChart2";
+import lineChartMainPage from "../components/echarts/lineChartMainPage";
+import lineChartMainPageA from "../components/echarts/lineChartMainPageA";
+import pieChartMainPage from "../components/echarts/pieChartMainPage";
 
 export default {
     name: "mainPage", // 首页
     components: {
         toolbarTab,
         tableList,
-        LineChart,
-        LineChart1,
-        lineChartA,
-        LineChart3,
-        pieChart,
-        pieChartA,
-        pieChart2,
+        lineChartMainPage,
+        lineChartMainPageA,
+        pieChartMainPage,
     },
     data() {
         return {

src/views/workManagement/projectInfo.vue

@@ -126,23 +126,23 @@
                     <div class="chart">
                         <div class="pieTitle">任务运行状态统计:</div>
                         <div class="pie">
-                            <pie-chart
+                            <pie-chart-project-info
                                 id="projectInfoPieA"
                                 :stateList="stateList"
                                 stateName="stateName"
                                 seriesName="任务运行状态统计"
-                            ></pie-chart>
+                            ></pie-chart-project-info>
                         </div>
                     </div>
                     <div class="chart">
                         <div class="pieTitle">结果动态统计:</div>
                         <div class="pie">
-                            <pie-chart
+                            <pie-chart-project-info
                                 id="projectInfoPieB"
                                 :stateList="resultList"
                                 stateName="resultName"
                                 seriesName="结果动态统计"
-                            ></pie-chart>
+                            ></pie-chart-project-info>
                         </div>
                     </div>
                 </div>
@@ -177,13 +177,18 @@
 <script>
 import handleConfigList from "../modelLibrary/components/handleConfigList.vue";
 import tableList from "@/components/grid/TableList";
-import pieChart from "@/components/echarts/pieChart";
+import pieChartProjectInfo from "@/components/echarts/pieChartProjectInfo";
 import canvasSensor from "./components/canvasProjectInfo.vue";
 import { mapState } from "vuex";
 
 export default {
     name: "projectInfo", // 项目详情
-    components: { handleConfigList, tableList, pieChart, canvasSensor },
+    components: {
+        handleConfigList,
+        tableList,
+        pieChartProjectInfo,
+        canvasSensor,
+    },
     data() {
         return {
             id: "",

src/views/workManagement/taskInfo.vue

@@ -463,7 +463,6 @@ export default {
             height: calc(25vh);
             margin-right: 3px;
             margin-bottom: 60px;
-            overflow: hidden;
 
             .title {
                 text-align: center;