| | |
| | | beta: 0 |
| | | } |
| | | }, |
| | | title: { |
| | | text: '众泰煤焦化合隐患单位隐患比例分析', |
| | | style: { |
| | | fontWeight: "bold" |
| | | } |
| | | }, |
| | | tooltip: { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }, |
| | |
| | | let xList = []; |
| | | let dataList = []; |
| | | if (data.data != null && data.data.length > 0) { |
| | | console.log("柱图",data) |
| | | data.data[0].forEach(n => { |
| | | xList.push(n.graph); |
| | | let singleData = { |
| | | "name": n.graph, |
| | | "type": 'bar', |
| | | "label": "labelOption", |
| | | "emphasis": { |
| | | focus: 'series' |
| | | }, |
| | | "data": [n.yAxes] |
| | | // "type": 'bar', |
| | | // "label": "labelOption", |
| | | // "emphasis": { |
| | | // focus: 'series' |
| | | // }, |
| | | "data": [parseInt(n.yAxes)] |
| | | } |
| | | dataList.push(singleData); |
| | | }) |
| | |
| | | obj = { |
| | | name: n.catalogy, |
| | | data: [], |
| | | type: 'line', |
| | | areaStyle: {} |
| | | // type: 'line', |
| | | // areaStyle: {} |
| | | } |
| | | dataList.push(obj) |
| | | } |
| | |
| | | dataList.forEach(n => { |
| | | let searchData = singileData.find(v => v.catalogy == n.name); |
| | | if (searchData != null) { |
| | | n.data.push(searchData.counts) |
| | | n.data.push(parseInt(searchData.counts)) |
| | | } else { |
| | | n.data.push(0) |
| | | } |
| | |
| | | // 折线图 |
| | | var chartDom = document.getElementById('line'); |
| | | // var chartDom = document.getElementById('myChart'); |
| | | var myChart = echarts.init(chartDom); |
| | | // 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: this.lineChartData.timeList |
| | | // // 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: this.lineChartData.dataList |
| | | // // series: [ |
| | | // // { |
| | | // // name: '电仪车间', |
| | | // // data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64], |
| | | // // type: 'line', |
| | | // // areaStyle: {} |
| | | // // } |
| | | // // ] |
| | | // } |
| | | // // 使用刚指定的配置项和数据显示图表。 |
| | | // myChart.setOption(option) |
| | | |
| | | var option = { |
| | | chart:{ |
| | | type:'area' |
| | | }, |
| | | 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: this.lineChartData.timeList |
| | | // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11'] |
| | | text: '众泰煤焦化各隐患单位隐患走势分析' |
| | | }, |
| | | yAxis: { |
| | | type: 'value' |
| | | title:{ |
| | | enabled:false |
| | | } |
| | | }, |
| | | color: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], |
| | | series: this.lineChartData.dataList |
| | | // series: [ |
| | | // { |
| | | // name: '电仪车间', |
| | | // data: [50, 35, 63, 64, 79, 95, 104, 50, 35, 63, 64], |
| | | // type: 'line', |
| | | // areaStyle: {} |
| | | // } |
| | | // ] |
| | | colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], |
| | | legend: { |
| | | align: "center", //程度标的目标地位 |
| | | verticalAlign: "bottom",//垂直标的目标地位 |
| | | x: 0, //间隔x轴的间隔 |
| | | y: 0 //间隔Y轴的间隔 |
| | | }, |
| | | xAxis: { |
| | | // type: 'category', |
| | | // boundaryGap: false, |
| | | categories: this.lineChartData.timeList, |
| | | // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11'] |
| | | }, |
| | | series: this.lineChartData.dataList, |
| | | exporting: { |
| | | enabled: false //去掉右上角 |
| | | }, |
| | | credits: { |
| | | enabled: false //不显示LOGO |
| | | }, |
| | | } |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart.setOption(option) |
| | | Highcharts.chart("line", option); |
| | | }, |
| | | initCloumnChart() { |
| | | // 柱形图 |
| | | var chartDom = document.getElementById('column'); |
| | | var myChart = echarts.init(chartDom); |
| | | var option; |
| | | const posList = [ |
| | | 'left', |
| | | 'right', |
| | | 'top', |
| | | 'bottom', |
| | | 'inside', |
| | | 'insideTop', |
| | | 'insideLeft', |
| | | 'insideRight', |
| | | 'insideBottom', |
| | | 'insideTopLeft', |
| | | 'insideTopRight', |
| | | 'insideBottomLeft', |
| | | 'insideBottomRight' |
| | | ]; |
| | | app.configParameters = { |
| | | rotate: { |
| | | min: -90, |
| | | max: 90 |
| | | |
| | | var option = { |
| | | chart:{ |
| | | type:'column' |
| | | }, |
| | | align: { |
| | | options: { |
| | | left: 'left', |
| | | center: 'center', |
| | | right: 'right' |
| | | title: { |
| | | text: null |
| | | }, |
| | | yAxis: { |
| | | title:{ |
| | | enabled:false |
| | | } |
| | | }, |
| | | verticalAlign: { |
| | | options: { |
| | | top: 'top', |
| | | middle: 'middle', |
| | | bottom: 'bottom' |
| | | } |
| | | }, |
| | | position: { |
| | | options: posList.reduce(function (map, pos) { |
| | | map[pos] = pos; |
| | | return map; |
| | | }, {}) |
| | | }, |
| | | distance: { |
| | | min: 0, |
| | | max: 100 |
| | | } |
| | | }; |
| | | app.config = { |
| | | rotate: 90, |
| | | align: 'left', |
| | | verticalAlign: 'middle', |
| | | position: 'insideBottom', |
| | | distance: 15, |
| | | onChange: function () { |
| | | const labelOption = { |
| | | rotate: app.config.rotate, |
| | | align: app.config.align, |
| | | verticalAlign: app.config.verticalAlign, |
| | | position: app.config.position, |
| | | distance: app.config.distance |
| | | }; |
| | | myChart.setOption({ |
| | | series: [ |
| | | { |
| | | label: labelOption |
| | | }, |
| | | { |
| | | label: labelOption |
| | | }, |
| | | { |
| | | label: labelOption |
| | | }, |
| | | { |
| | | label: labelOption |
| | | } |
| | | ] |
| | | }); |
| | | } |
| | | }; |
| | | const labelOption = { |
| | | show: false, |
| | | position: app.config.position, |
| | | distance: app.config.distance, |
| | | align: app.config.align, |
| | | verticalAlign: app.config.verticalAlign, |
| | | rotate: app.config.rotate, |
| | | formatter: '{c} {name|{a}}', |
| | | fontSize: 16, |
| | | rich: { |
| | | name: {} |
| | | } |
| | | }; |
| | | console.log(this.columnChartData) |
| | | this.columnChartData.dataList.forEach(n => { |
| | | n.label = labelOption; |
| | | }) |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | } |
| | | }, |
| | | colors: ['#9a0202', '#02cccc', '#0202ff', '#ff9a02', '#02ff02', '#CC02CCFF', '#35FF02FF', '#CCFF67FF', '#35CC67FF', '#9A0202FF'], |
| | | legend: { |
| | | bottom: 0, |
| | | data: this.columnChartData.xList |
| | | // data: ['安全环保部', '电仪车间', '干熄焦', '工程部','化产二车间', '化产一车间', '机电部', '炼焦二车间','炼焦一车间', '生产技术部', '消防保卫部', '选煤厂', '原料二车间', '原料一车间', '众和机电'] |
| | | align: "center", //程度标的目标地位 |
| | | verticalAlign: "bottom",//垂直标的目标地位 |
| | | x: 0, //间隔x轴的间隔 |
| | | y: 0 //间隔Y轴的间隔 |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | containLabel: true |
| | | xAxis: { |
| | | // type: 'category', |
| | | // boundaryGap: false, |
| | | categories: this.columnChartData.xList, |
| | | max:this.columnChartData.xList.length-1 |
| | | // data: ['2022-05-01', '', '2022-05-03', '', '2022-05-05', '', '2022-05-07', '', '2022-05-09', '', '2022-05-11'] |
| | | }, |
| | | // toolbox: { |
| | | // show: true, |
| | | // orient: 'vertical', |
| | | // left: 'right', |
| | | // top: 'center', |
| | | // feature: { |
| | | // mark: { show: true }, |
| | | // dataView: { show: true, readOnly: false }, |
| | | // magicType: { show: true, type: ['line', 'bar', 'stack'] }, |
| | | // restore: { show: true }, |
| | | // saveAsImage: { show: true } |
| | | // } |
| | | // }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | axisTick: {show: false}, |
| | | data: this.columnChartData.xList |
| | | // data: ['2012', '2013', '2014', '2015', '2016'] |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: 'value' |
| | | } |
| | | ], |
| | | series: this.columnChartData.dataList |
| | | // series: [ |
| | | // { |
| | | // name: '安全环保部', |
| | | // type: 'bar', |
| | | // label: labelOption, |
| | | // emphasis: { |
| | | // focus: 'series' |
| | | // }, |
| | | // data: [320] |
| | | // } |
| | | // ] |
| | | }; |
| | | // 使用刚指定的配置项和数据显示图表。 |
| | | myChart.setOption(option) |
| | | series: this.columnChartData.dataList, |
| | | exporting: { |
| | | enabled: false //去掉右上角 |
| | | }, |
| | | credits: { |
| | | enabled: false //不显示LOGO |
| | | }, |
| | | } |
| | | Highcharts.chart("column", option); |
| | | }, |
| | | getCurrentMonthFirst() { |
| | | var date = new Date(); |