From b56ab52b724ba0d80761ac78183b968d28e3b75a Mon Sep 17 00:00:00 2001 From: panzy <225@qq.com> Date: 星期六, 21 五月 2022 07:58:12 +0800 Subject: [PATCH] 页面优化,接入柱状图 --- src/views/chartAnalysis/index.vue | 627 +++++++++++++++++++++++++-------------------------------- 1 files changed, 275 insertions(+), 352 deletions(-) diff --git a/src/views/chartAnalysis/index.vue b/src/views/chartAnalysis/index.vue index 103dab2..816b21a 100644 --- a/src/views/chartAnalysis/index.vue +++ b/src/views/chartAnalysis/index.vue @@ -122,6 +122,7 @@ </template> <script> import {echarts} from "../../global"; +import {chart_analysis} from "@/api/sgyhpczl/chartAnalysis"; export default { name: "index", @@ -136,6 +137,17 @@ inspectionCategory: '日常检查', policeSituation: '轻警', }, + formData:{ + "echart_type": "column", //line:折线图;column:柱状图;pie :饼状图 + "model": "0", //0: + "beginTime": "2022-04-01", //开始时间 + "endTime": "2022-04-30", //结束时间 + "ht_typesub": "", //隐患类别 + "level": "", //隐患级别 + "superior": "", //上级单位 + "checktype": "", //检查类别 + "curWarningLevel": "" //警情 + }, categoryList: ['生产'], levelList:['一般隐患D'], superiorUnitList: ['新疆能源'], @@ -143,227 +155,259 @@ policeSituationList: ['轻警'], radio: 1, radio2: 1, + columnChartData:{} } }, mounted() { - this.initChart() + this.getData() }, methods: { + getData(){ + chart_analysis(this.formData).then(res=>{ + let data = res.data; + if(data.ok){ + let xList = []; + let dataList = []; + data.data[0].forEach(n=>{ + xList.push(n.graph); + let sigleData = { + "name": n.graph, + "type": 'bar', + "label": "labelOption", + "emphasis": { + focus: 'series' + }, + "data": [n.yAxes] + } + dataList.push(sigleData); + }) + this.columnChartData.xList = xList; + this.columnChartData.dataList = dataList; + this.initCloumnChart() + // this.initChart() + } + + }) + }, initChart() { - // 折线图 - // var chartDom = document.getElementById('myChart'); - // var myChart = echarts.init(chartDom); - // var option = { - // title: { - // text: '众泰煤焦化各隐患单位隐患走势分析', - // left: 'center' - // }, - // legend:{ - // bottom: 0, - // // textStyle: { - // // color: '#ffffff' - // // }, - // }, - // grid: { - // left: '3%', - // right: '4%', - // bottom: '5%', - // containLabel: true - // }, - // xAxis: { - // type: 'category', - // boundaryGap: false, - // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11'] - // }, - // yAxis: { - // type: 'value' - // }, - // color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], - // series: [ - // { - // name: '电仪车间', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '原料二车间', - // data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '化产二车间', - // data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '烧焦二车间', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '化产一车间', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '炼焦一车间', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '原料一车间', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '众和机电', - // data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '生产技术部', - // data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '选煤厂', - // data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '工程部', - // data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '机电部', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // } - // ] - // } - // // 使用刚指定的配置项和数据显示图表。 - // myChart.setOption(option) - // 饼图 + var chartDom = document.getElementById('cylindrical'); // var chartDom = document.getElementById('myChart'); - // var myChart = echarts.init(chartDom); - // var option = { - // title: { - // text: '众泰煤焦化各隐患单位隐患走势分析', - // left: 'center' - // }, - // legend:{ - // bottom: 0, - // // textStyle: { - // // color: '#ffffff' - // // }, - // }, - // grid: { - // left: '3%', - // right: '4%', - // bottom: '5%', - // containLabel: true - // }, - // xAxis: { - // type: 'category', - // boundaryGap: false, - // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11'] - // }, - // yAxis: { - // type: 'value' - // }, - // color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], - // series: [ - // { - // name: '电仪车间', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '原料二车间', - // data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '化产二车间', - // data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '烧焦二车间', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '化产一车间', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '炼焦一车间', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '原料一车间', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '众和机电', - // data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '生产技术部', - // data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '选煤厂', - // data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '工程部', - // data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64], - // type: 'line', - // areaStyle: {} - // }, - // { - // name: '机电部', - // data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], - // type: 'line', - // areaStyle: {} - // } - // ] - // } - // // 使用刚指定的配置项和数据显示图表。 - // myChart.setOption(option) - + var myChart = echarts.init(chartDom); + var option = { + title: { + text: '众泰煤焦化各隐患单位隐患走势分析', + left: 'center' + }, + legend:{ + bottom: 0, + // textStyle: { + // color: '#ffffff' + // }, + }, + grid: { + left: '3%', + right: '4%', + bottom: '5%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11'] + }, + yAxis: { + type: 'value' + }, + color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], + series: [ + { + name: '电仪车间', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '原料二车间', + data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55], + type: 'line', + areaStyle: {} + }, + { + name: '化产二车间', + data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '烧焦二车间', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '化产一车间', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '炼焦一车间', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '原料一车间', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '众和机电', + data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '生产技术部', + data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '选煤厂', + data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '工程部', + data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64], + type: 'line', + areaStyle: {} + }, + { + name: '机电部', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + } + ] + } + // 使用刚指定的配置项和数据显示图表。 + myChart.setOption(option) + }, + initLineChart(){ + // 折线图 + var chartDom = document.getElementById('cylindrical'); + // var chartDom = document.getElementById('myChart'); + var myChart = echarts.init(chartDom); + var option = { + title: { + text: '众泰煤焦化各隐患单位隐患走势分析', + left: 'center' + }, + legend:{ + bottom: 0, + // textStyle: { + // color: '#ffffff' + // }, + }, + grid: { + left: '3%', + right: '4%', + bottom: '5%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11'] + }, + yAxis: { + type: 'value' + }, + color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], + series: [ + { + name: '电仪车间', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '原料二车间', + data: [50, 65, 84, 93, 52, 78, 10,58,78,20,55], + type: 'line', + areaStyle: {} + }, + { + name: '化产二车间', + data: [ 95, 104,50, 35, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '烧焦二车间', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '化产一车间', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '炼焦一车间', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '原料一车间', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '众和机电', + data: [95, 104,50, 35, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '生产技术部', + data: [50, 35, 63, 95, 104,50, 35, 63,35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '选煤厂', + data: [5, 35, 67, 64, 45, 95, 23,50, 35, 63, 64], + type: 'line', + areaStyle: {} + }, + { + name: '工程部', + data: [50, 35, 63, 16, 79, 95, 45,50, 24, 7, 64], + type: 'line', + areaStyle: {} + }, + { + name: '机电部', + data: [50, 35, 63, 64, 79, 95, 104,50, 35, 63, 64], + type: 'line', + areaStyle: {} + } + ] + } + // 使用刚指定的配置项和数据显示图表。 + myChart.setOption(option) + }, + initCloumnChart(){ // 柱形图 var chartDom = document.getElementById('cylindrical'); var myChart = echarts.init(chartDom); @@ -458,6 +502,9 @@ name: {} } }; + this.columnChartData.dataList.forEach(n=>{ + n.label = labelOption; + }) option = { tooltip: { trigger: 'axis', @@ -467,7 +514,8 @@ }, legend: { bottom: 0, - data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电'] + data: this.columnChartData.xList + // data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电'] }, grid: { left: '3%', @@ -499,145 +547,20 @@ type: 'value' } ], - series: [ - { - name: '安全环保部', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [320] - }, - { - name: '电仪车间', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [332] - }, - { - name: '干熄焦', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [150] - }, - { - name: '工程部', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [541] - }, - { - name: '化产二车间', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [256] - }, - { - name: '化产一车间', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [351] - }, - { - name: '机电部', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [122] - }, - { - name: '炼焦二车间', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [220] - }, - { - name: '炼焦一车间', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [255] - }, - { - name: '生产技术部', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [122] - }, - { - name: '消防保卫部', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [220] - }, - { - name: '选煤厂', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [255] - }, - { - name: '原料二车间', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [255] - }, - { - name: '原料一车间', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [255] - }, - { - name: '众和机电', - type: 'bar', - label: labelOption, - emphasis: { - focus: 'series' - }, - data: [255] - }, - ] + series:this.columnChartData.dataList + // series: [ + // { + // name: '安全环保部', + // type: 'bar', + // label: labelOption, + // emphasis: { + // focus: 'series' + // }, + // data: [320] + // } + // ] }; - // 使用刚指定的配置项和数据显示图表。 + // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option) } } -- Gitblit v1.9.2