| | |
| | | } |
| | | |
| | | /** |
| | | * @description 饼图渲染 |
| | | * @description 仪表盘渲染 |
| | | */ |
| | | dashboardrender = () => { |
| | | const { plot, chartId, data } = this.state |
| | | |
| | | let _data = fromJS(data).toJS() |
| | | if (_data.value && _data.value > plot.maxValue) { |
| | | _data.value = plot.maxValue |
| | | } |
| | | |
| | | const chart = new Chart({ |
| | | container: chartId, |
| | | autoFit: true, |
| | | height: plot.height ? (plot.height - 80) : 320, |
| | | padding: [0, 0, 0, 0], |
| | | }) |
| | | chart.data([data]); |
| | | chart.data([_data]); |
| | | chart.scale('value', { |
| | | min: 0, |
| | | max: plot.maxValue, |
| | | tickInterval: plot.tickInterval, |
| | | }); |
| | | }) |
| | | chart.coordinate('polar', { |
| | | startAngle: (-9 / 8) * Math.PI, |
| | | endAngle: (1 / 8) * Math.PI, |
| | | radius: 0.75, |
| | | }); |
| | | }) |
| | | |
| | | chart.axis('1', false); |
| | | chart.axis('value', { |
| | |
| | | } |
| | | }, |
| | | grid: null, |
| | | }); |
| | | chart.legend(false); |
| | | chart.tooltip(false); |
| | | }) |
| | | chart.legend(false) |
| | | chart.tooltip(false) |
| | | chart |
| | | .point() |
| | | .position('value*1') |
| | |
| | | appear: { |
| | | animation: 'fade-in' |
| | | } |
| | | }); |
| | | }) |
| | | |
| | | // 绘制仪表盘背景 |
| | | chart.annotation().arc({ |
| | |
| | | lineWidth: 18, |
| | | lineDash: null, |
| | | }, |
| | | }); |
| | | }) |
| | | } else { |
| | | let start = 0 |
| | | plot.colors.forEach(item => { |
| | |
| | | textAlign: 'center', |
| | | }, |
| | | offsetY: 15, |
| | | }); |
| | | }) |
| | | } |
| | | |
| | | chart.render() |