| | |
| | | export default { |
| | | data() { |
| | | //这里存放数据 |
| | | return { myChart }; |
| | | return { myChart: null }; |
| | | }, |
| | | //方法集合 |
| | | methods: { |
| | |
| | | title: { |
| | | // show: false, |
| | | text: '数据及服务提交', |
| | | // x: "4%", |
| | | top: '15', |
| | | textStyle: { |
| | | color: '#fff', |
| | | // fontSize: "22", |
| | |
| | | // fontSize: "16", |
| | | // }, |
| | | }, |
| | | // 图表的位置 |
| | | // 图表的位置 |
| | | // grid: { |
| | | // position: "center", |
| | | // top:"4%" |
| | | // }, |
| | | |
| | | color: colorArr, |
| | |
| | | orient: 'vertical', |
| | | icon: 'circle', //图例形状 |
| | | data: legendData, |
| | | top: 0, |
| | | top: 10, |
| | | right: 0, |
| | | itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ] |
| | | itemHeight: 14, // 图例标记的图形高度。[ default: 14 ] |
| | |
| | | fontSize: 12, |
| | | }, |
| | | }, |
| | | radius: 120, |
| | | radius: 80, |
| | | nameGap: 2, // 图中工艺等字距离图的距离 |
| | | splitNumber: 4, // 网格线的个数 |
| | | // center: ["45%", "45%"], // 图的位置 |
| | | center: ["50%", "65%"], // 图的位置 |
| | | |
| | | 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> |