| | |
| | | "ezuikit-js": "^0.2.3", |
| | | "file-saver": "^1.3.8", |
| | | "fuse.js": "3.4.2", |
| | | "highcharts": "^10.1.0", |
| | | "highcharts-vue": "^1.4.0", |
| | | "jquery": "^3.6.0", |
| | | "js-cookie": "2.2.0", |
| | | "jsbarcode": "^3.11.4", |
| | |
| | | size: Cookies.get('size') || 'medium' // set element-ui default size |
| | | }) |
| | | |
| | | //highcharts |
| | | import HighchartsVue from 'highcharts-vue' |
| | | |
| | | //接下来,您可以将其注册为 Vue 对象中的插件: |
| | | |
| | | Vue.use(HighchartsVue) |
| | | |
| | | |
| | | |
| | | // register global utility filters. |
| | | Object.keys(filters).forEach(key => { |
| | | Vue.filter(key, filters[key]) |
| | |
| | | import {echarts} from "../../global"; |
| | | import {chart_analysis} from "@/api/sgyhpczl/chartAnalysis"; |
| | | |
| | | // 导入chart组件 |
| | | import Highcharts from "highcharts/highstock"; |
| | | import loadExporting from "highcharts/modules/exporting"; |
| | | import exportExcel from "highcharts/modules/export-data.src"; |
| | | import highcharts3d from 'highcharts/highcharts-3d' |
| | | loadExporting(Highcharts); |
| | | exportExcel(Highcharts); |
| | | highcharts3d(Highcharts) |
| | | |
| | | |
| | | export default { |
| | | name: "index", |
| | | data() { |
| | |
| | | superiorUnit: '新疆能源', |
| | | inspectionCategory: '日常检查', |
| | | policeSituation: '轻警', |
| | | chart: null, |
| | | }, |
| | | formData: { |
| | | "echart_type": "column", //line:折线图;column:柱状图;pie :饼状图 |
| | |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.getData() |
| | | // this.getData() |
| | | this.initEacharts3() |
| | | }, |
| | | watch: { |
| | | "chartType": function (newVal, oldVal) { |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | // 饼图 |
| | | initEacharts3(){ |
| | | var n = 5000, |
| | | data = this.getData(n); |
| | | console.time("line"); |
| | | var option = { |
| | | chart: { |
| | | type: 'pie', |
| | | options3d: { |
| | | enabled: true, |
| | | alpha: 45, |
| | | beta: 0 |
| | | } |
| | | }, |
| | | title: { |
| | | text: '众泰煤焦化合隐患单位隐患比例分析', |
| | | style:{ |
| | | fontWeight: "bold" |
| | | } |
| | | }, |
| | | tooltip: { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }, |
| | | plotOptions: { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | depth: 35, |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '{point.name}:'+' {point.y}%' |
| | | } |
| | | } |
| | | }, |
| | | exporting: { |
| | | enabled:false //去掉右上角 |
| | | }, |
| | | credits: { |
| | | enabled: false //不显示LOGO |
| | | }, |
| | | series: [{ |
| | | type: 'pie', |
| | | name: '浏览器占比', |
| | | data: [ |
| | | ['安全环保部', 5.0], |
| | | ['电仪车间', 16.8], |
| | | { |
| | | name: '干熄焦', |
| | | y: 12.8, |
| | | sliced: true, |
| | | selected: true |
| | | }, |
| | | ['工程部', 8.5], |
| | | ['化产二车间', 6.2], |
| | | ['化产一车间', 0.7], |
| | | ['机电部', 0.7], |
| | | ['炼焦二车间', 3.7], |
| | | ['炼焦一车间', 4.8], |
| | | ['生产技术部', 4.2], |
| | | ['消防保卫部', 4.7], |
| | | ['选煤厂', 0.7], |
| | | ['原料二车间', 15.7], |
| | | ['原料一车间', 34.7], |
| | | ['众和机电', 0.7] |
| | | ] |
| | | }] |
| | | } |
| | | Highcharts.chart("cylindrical",option); |
| | | console.timeEnd("line"); |
| | | }, |
| | | getData() { |
| | | chart_analysis(this.formData).then(res => { |
| | | let data = res.data; |
| | |
| | | }) |
| | | }, |
| | | initChart() { |
| | | // 饼图 |
| | | // 柱形图 |
| | | var chartDom = document.getElementById('cylindrical'); |
| | | // var chartDom = document.getElementById('myChart'); |
| | | var myChart = echarts.init(chartDom); |