| | |
| | | export default { |
| | | data() { |
| | | //这里存放数据 |
| | | return { myChart }; |
| | | return { myChart: null }; |
| | | }, |
| | | //方法集合 |
| | | methods: { |
| | |
| | | title: { |
| | | // show: false, |
| | | text: '数据及服务提交', |
| | | // x: "4%", |
| | | top: '15', |
| | | textStyle: { |
| | | color: '#fff', |
| | | // fontSize: "22", |
| | | }, |
| | | show: false |
| | | // subtextStyle: { |
| | | // color: "#90979c", |
| | | // fontSize: "16", |
| | | // }, |
| | | }, |
| | | // 图表的位置 |
| | | // grid: { |
| | | // position: "center", |
| | | // }, |
| | | // 图表的位置 |
| | | grid: { |
| | | top: '10', |
| | | left: '0%', |
| | | right: '0%', |
| | | bottom: '0%', |
| | | containLabel: true, |
| | | }, |
| | | |
| | | color: colorArr, |
| | | legend: { |
| | |
| | | fontSize: 12, |
| | | }, |
| | | }, |
| | | radius: 120, |
| | | radius: 80, |
| | | nameGap: 2, // 图中工艺等字距离图的距离 |
| | | splitNumber: 4, // 网格线的个数 |
| | | // center: ["45%", "45%"], // 图的位置 |
| | | center: ["50%", "45%"], // 图的位置 |
| | | |
| | | indicator: indicator, |
| | | splitArea: { |
| | |
| | | axisLine: { |
| | | //指向外圈文本的分隔线样式 |
| | | lineStyle: { |
| | | color: '#153269', |
| | | color: '#FFF', |
| | | }, |
| | | }, |
| | | splitLine: { |
| | | lineStyle: { |
| | | color: '#113865', // 分隔线颜色 |
| | | color: '#FFF', // 分隔线颜色 |
| | | width: 1, // 分隔线线宽 |
| | | }, |
| | | }, |
| | |
| | | //@import url(); 引入公共css类 |
| | | .systemMonitoring_box { |
| | | padding: 20px; |
| | | width: 100%; |
| | | height: 100%; |
| | | |
| | | #gauge_chart1 { |
| | | width: 100%; |
| | | height: 100%; |
| | | width: calc(100% - 40px); |
| | | height: calc(100% - 40px); |
| | | } |
| | | } |
| | | </style> |