1 line
20 KiB
JSON
1 line
20 KiB
JSON
{"remainingRequest":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\headWay.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\视频边缘计算管理平台\\TransFlow\\src\\components\\chart\\headWay.vue","mtime":1672301186790},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1672206975777},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\babel-loader\\lib\\index.js","mtime":1672206975618},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1672206975777},{"path":"E:\\视频边缘计算管理平台\\TransFlow\\node_modules\\vue-loader\\lib\\index.js","mtime":1672206979279}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nexport default {\n name: 'headWayChart',\n //车头时距组件\n data: function data() {\n return {\n tableData: [{\n name: '111',\n val1: '100',\n val2: '200',\n val3: '300',\n val4: '400'\n }],\n xData: ['0点', '1点', '2点', '3点', '4点', '5点', '6点', '7点', '8点', '9点', '10点', '11点', '12点', '13点', '14点'],\n valData: [120, 132, 101, 134, 90, 432, 421, 234, 230, 210, 182, 191, 234, 290, 330]\n };\n },\n methods: {\n drawLine: function drawLine() {\n var myChart = this.$echarts.init(this.$refs.lineChart);\n var option = {\n grid: {\n left: '5%',\n right: '10%',\n top: '20%',\n bottom: '15%',\n containLabel: true\n },\n tooltip: {\n show: true,\n trigger: 'axis'\n },\n xAxis: [{\n type: 'category',\n axisLine: {\n show: true,\n lineStyle: {\n color: '#85C1D9'\n }\n },\n axisTick: {\n show: false\n },\n axisLabel: {\n color: '#8BC4F2',\n margin: 6\n },\n splitLine: {\n show: false\n },\n boundaryGap: ['5%', '5%'],\n data: this.xData\n }],\n yAxis: [{\n type: 'value',\n axisLabel: {\n color: '#8BC4F2',\n margin: 6\n },\n splitLine: {\n lineStyle: {\n color: '#355C84',\n type: 'dashed'\n }\n }\n }],\n series: [{\n name: '已采纳',\n type: 'line',\n stack: '总量',\n symbolSize: 6,\n itemStyle: {\n color: '#55EFF1',\n borderColor: '#55EFF1',\n borderWidth: 2\n },\n data: this.valData\n }]\n };\n myChart.setOption(option);\n\n window.onresize = function () {\n // 根据窗口大小变化图表自适应\n myChart.resize();\n };\n },\n drawBar: function drawBar() {\n var myChart = this.$echarts.init(this.$refs.barChart);\n var option = {\n color: ['#7262FD', '#FC5A5A'],\n tooltip: {\n confine: true\n },\n grid: {\n left: '2%',\n right: '4%',\n bottom: '10%',\n top: '20%',\n containLabel: true\n },\n legend: {\n icon: 'rect',\n orient: 'horizontal',\n left: 'right',\n itemWidth: 12,\n itemHeight: 12,\n formatter: ['{a|{name}}'].join('\\n'),\n textStyle: {\n fontSize: 12,\n color: '#6A93B9',\n height: 8,\n rich: {\n a: {\n verticalAlign: 'bottom'\n }\n }\n },\n data: ['已完成', '未完成']\n },\n xAxis: {\n type: 'category',\n data: ['04-12', '04-14', '04-15', '04-16', '04-17', '04-18'],\n axisLine: {\n lineStyle: {\n color: '#6A93B9'\n }\n },\n axisLabel: {\n fontSize: 12,\n color: '#6A93B9'\n },\n axisTick: {\n show: false\n }\n },\n yAxis: [{\n type: 'value',\n min: 0,\n minInterval: 1,\n splitArea: {\n show: false\n },\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n splitLine: {\n lineStyle: {\n color: '#6A93B9' // type: 'dashed', // dotted 虚线\n\n }\n },\n axisLabel: {\n fontSize: 12,\n color: '#6A93B9',\n fontFamily: 'Bebas'\n }\n }, {\n type: 'value',\n axisLine: {\n show: false\n },\n axisTick: {\n show: false\n },\n splitLine: {\n show: false\n },\n axisLabel: {\n fontSize: 12,\n formatter: '{value}%',\n // 右侧Y轴文字显示\n fontFamily: 'Bebas',\n color: '#6A93B9'\n },\n splitArea: {\n show: false\n }\n }],\n series: [{\n type: 'bar',\n barWidth: 40,\n itemStyle: {\n barBorderRadius: [15, 15, 0, 0]\n },\n name: '已完成',\n data: [28, 51, 43, 43, 48, 15]\n }, {\n type: 'bar',\n barWidth: 40,\n itemStyle: {\n barBorderRadius: [15, 15, 0, 0]\n },\n name: '未完成',\n data: [28, 39, 36, 36, 31, 21]\n }]\n };\n myChart.setOption(option);\n }\n },\n mounted: function mounted() {\n this.drawLine();\n this.drawBar();\n }\n};",{"version":3,"sources":["headWay.vue"],"names":[],"mappings":"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","sourcesContent":["<template>\r\n <div class=\"setion\">\r\n <p>车头时距</p>\r\n <div class=\"typeContent\">\r\n <p>数值</p>\r\n <div style=\"width:95%;margin-bottom: 20px;\">\r\n <el-table :data=\"tableData\" border style=\"width: 100%\">\r\n <el-table-column align=\"center\" prop=\"name\" label=\"名称\"></el-table-column>\r\n <el-table-column align=\"center\" prop=\"val1\" label=\"val1\"></el-table-column>\r\n <el-table-column align=\"center\" prop=\"val2\" label=\"val2\"></el-table-column>\r\n <el-table-column align=\"center\" prop='val3' label=\"val3\"></el-table-column>\r\n <el-table-column align=\"center\" prop='val4' label=\"val4\"></el-table-column>\r\n </el-table>\r\n </div>\r\n <div class=\"border\">\r\n <div id=\"lineChart\" ref=\"lineChart\" style=\"width:auto;height:300px;\"></div>\r\n </div>\r\n <div class=\"border\">\r\n <div ref=\"barChart\" style=\"width:auto;height:300px;\">\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</template>\r\n \r\n<script>\r\nexport default {\r\n name: 'headWayChart', //车头时距组件\r\n data() {\r\n return {\r\n tableData: [\r\n {\r\n name: '111',\r\n val1: '100',\r\n val2: '200',\r\n val3: '300',\r\n val4: '400'\r\n }\r\n ],\r\n xData: [\r\n '0点',\r\n '1点',\r\n '2点',\r\n '3点',\r\n '4点',\r\n '5点',\r\n '6点',\r\n '7点',\r\n '8点',\r\n '9点',\r\n '10点',\r\n '11点',\r\n '12点',\r\n '13点',\r\n '14点',\r\n ],\r\n valData: [120, 132, 101, 134, 90, 432, 421, 234, 230, 210, 182, 191, 234, 290, 330],\r\n }\r\n },\r\n methods: {\r\n drawLine() {\r\n let myChart = this.$echarts.init(this.$refs.lineChart)\r\n\r\n let option = {\r\n grid: {\r\n left: '5%',\r\n right: '10%',\r\n top: '20%',\r\n bottom: '15%',\r\n containLabel: true,\r\n },\r\n tooltip: {\r\n show: true,\r\n trigger: 'axis',\r\n },\r\n xAxis: [\r\n {\r\n type: 'category',\r\n axisLine: {\r\n show: true,\r\n lineStyle: {\r\n color: '#85C1D9',\r\n },\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n color: '#8BC4F2',\r\n margin: 6,\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n boundaryGap: ['5%', '5%'],\r\n data: this.xData,\r\n },\r\n ],\r\n yAxis: [\r\n {\r\n type: 'value',\r\n axisLabel: {\r\n color: '#8BC4F2',\r\n margin: 6,\r\n },\r\n splitLine: {\r\n lineStyle: {\r\n color: '#355C84',\r\n type: 'dashed',\r\n },\r\n },\r\n },\r\n ],\r\n series: [\r\n {\r\n name: '已采纳',\r\n type: 'line',\r\n stack: '总量',\r\n symbolSize: 6,\r\n itemStyle: {\r\n color: '#55EFF1',\r\n borderColor: '#55EFF1',\r\n borderWidth: 2,\r\n },\r\n data: this.valData,\r\n },\r\n ],\r\n };\r\n myChart.setOption(option)\r\n window.onresize = () => { // 根据窗口大小变化图表自适应\r\n myChart.resize();\r\n };\r\n },\r\n drawBar() {\r\n let myChart = this.$echarts.init(this.$refs.barChart)\r\n let option = {\r\n color: ['#7262FD', '#FC5A5A'],\r\n tooltip: {\r\n confine: true,\r\n },\r\n grid: {\r\n left: '2%',\r\n right: '4%',\r\n bottom: '10%',\r\n top: '20%',\r\n containLabel: true,\r\n },\r\n legend: {\r\n icon: 'rect',\r\n orient: 'horizontal',\r\n left: 'right',\r\n itemWidth: 12,\r\n itemHeight: 12,\r\n formatter: ['{a|{name}}'].join('\\n'),\r\n textStyle: {\r\n fontSize: 12,\r\n color: '#6A93B9',\r\n height: 8,\r\n rich: {\r\n a: {\r\n verticalAlign: 'bottom',\r\n },\r\n },\r\n },\r\n data: ['已完成', '未完成'],\r\n },\r\n xAxis: {\r\n type: 'category',\r\n data: ['04-12', '04-14', '04-15', '04-16', '04-17', '04-18'],\r\n axisLine: {\r\n lineStyle: {\r\n color: '#6A93B9',\r\n },\r\n },\r\n axisLabel: {\r\n fontSize: 12,\r\n color: '#6A93B9',\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n },\r\n yAxis: [{\r\n type: 'value',\r\n min: 0,\r\n minInterval: 1,\r\n splitArea: {\r\n show: false,\r\n },\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n lineStyle: {\r\n color: '#6A93B9',\r\n // type: 'dashed', // dotted 虚线\r\n },\r\n },\r\n axisLabel: {\r\n fontSize: 12,\r\n color: '#6A93B9',\r\n fontFamily: 'Bebas',\r\n },\r\n }, {\r\n type: 'value',\r\n axisLine: {\r\n show: false,\r\n },\r\n axisTick: {\r\n show: false,\r\n },\r\n splitLine: {\r\n show: false,\r\n },\r\n axisLabel: {\r\n fontSize: 12,\r\n formatter: '{value}%', // 右侧Y轴文字显示\r\n fontFamily: 'Bebas',\r\n color: '#6A93B9',\r\n },\r\n splitArea: {\r\n show: false,\r\n },\r\n }],\r\n series: [{\r\n type: 'bar',\r\n barWidth: 40,\r\n itemStyle: { barBorderRadius: [15, 15, 0, 0], },\r\n name: '已完成',\r\n data: [28, 51, 43, 43, 48, 15]\r\n }, {\r\n type: 'bar',\r\n barWidth: 40,\r\n itemStyle: { barBorderRadius: [15, 15, 0, 0], },\r\n name: '未完成',\r\n data: [28, 39, 36, 36, 31, 21]\r\n },\r\n ],\r\n };\r\n myChart.setOption(option)\r\n },\r\n },\r\n mounted() {\r\n this.drawLine()\r\n this.drawBar()\r\n }\r\n}\r\n</script>\r\n<style scoped>\r\n.typeContent {\r\n border: 1px solid;\r\n padding: 20px;\r\n box-sizing: border-box;\r\n}\r\n\r\n.border {\r\n width: 100%;\r\n border: 1px solid;\r\n margin-bottom: 20px;\r\n}\r\n</style>"],"sourceRoot":"src/components/chart"}]} |