| | |
| | | let { chart } = useEchartsResize(chartRef) |
| | | |
| | | const list = ref([]) |
| | | function buildOption() { |
| | | function buildOption () { |
| | | const names = list.value.map(item => item.type) |
| | | const values = list.value.map(item => item.count) |
| | | const hasData = values.length > 0 |
| | |
| | | graphic: hasData |
| | | ? [] |
| | | : [ |
| | | { |
| | | type: 'text', |
| | | left: 'center', |
| | | top: 'middle', |
| | | style: { |
| | | text: '暂无数据', |
| | | fill: '#FFFFFF', |
| | | font: '14px Arial', |
| | | textAlign: 'center', |
| | | textVerticalAlign: 'middle', |
| | | }, |
| | | { |
| | | type: 'text', |
| | | left: 'center', |
| | | top: 'middle', |
| | | style: { |
| | | text: '暂无数据', |
| | | fill: '#FFFFFF', |
| | | font: '14px Arial', |
| | | textAlign: 'center', |
| | | textVerticalAlign: 'middle', |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | grid: { |
| | | top: 15, |
| | | left: 10, |
| | | right: 10, |
| | | bottom: 10, |
| | | bottom: 0, |
| | | containLabel: true, |
| | | }, |
| | | tooltip: { |
| | |
| | | show: false, |
| | | }, |
| | | axisLabel: { |
| | | color: '#FFFFFF', |
| | | color: '#B4C0CC', |
| | | fontSize: 12, |
| | | interval: 0, |
| | | rotate: 25, |
| | | margin: 8, |
| | | formatter: value => { |
| | | if (value == null) return '' |
| | | const text = String(value) |
| | | return text.length > 4 ? `${text.slice(0, 4)}...` : text |
| | | }, |
| | | }, |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | max: Math.ceil(Math.max(...values) * 1.2), |
| | | minInterval: 1, |
| | | axisLabel: { |
| | | color: '#FFFFFF', |
| | | color: '#B4C0CC', |
| | | fontSize: 12, |
| | | }, |
| | | axisLine: { |
| | |
| | | show: false, |
| | | }, |
| | | splitLine: { |
| | | show: false, |
| | | }, |
| | | show: true, |
| | | lineStyle: { |
| | | color: "rgba(93, 106, 143, .5)", |
| | | type: "dashed" |
| | | } |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | symbolRepeat: 'fixed', |
| | | symbolMargin: 3, |
| | | symbol: 'rect', |
| | | symbolClip: false, |
| | | symbolClip: true, |
| | | symbolPosition: 'end', |
| | | clip: true, |
| | | symbolSize: [10, 3], |
| | | data: values, |
| | | z: 2, |
| | |
| | | .deviceChart { |
| | | width: 638px; |
| | | } |
| | | |
| | | .titleBg { |
| | | width: 618px; |
| | | height: 34px; |