| | |
| | | show: false, |
| | | startValue: this.startValue, // 从头开始 |
| | | endValue: this.endValue, // 一次性展示几个 |
| | | zoomOnMouseWheel: false, |
| | | moveOnMouseWheel: true, |
| | | moveOnMouseMove: true, |
| | | }, |
| | | ], |
| | | legend: { |
| | |
| | | textStyle: { |
| | | color: "#00FFFF", |
| | | }, |
| | | formatter: function (value) { |
| | | return `${value}%`; |
| | | }, |
| | | }, |
| | | }, |
| | | ], |
| | |
| | | label: { |
| | | show: true, |
| | | position: "right", |
| | | color: "#00FFFF", |
| | | formatter: function (params) { |
| | | if (params.dataIndex % 2 == 0) { |
| | | return `{a|${params.value}%}`; |
| | | } else { |
| | | return `{b|${params.value}%}`; |
| | | } |
| | | }, |
| | | rich: { |
| | | a: { |
| | | color: "#00FFFF", |
| | | }, |
| | | b: { |
| | | color: "#dcb018", |
| | | }, |
| | | }, |
| | | }, |
| | | itemStyle: { |
| | | normal: { |
| | |
| | | borderWidth: 5, |
| | | borderRadius: 4, |
| | | formatter: function (params) { |
| | | return `{a|${params.name}} {b|${params.value + "%"}}`; |
| | | let label = |
| | | params.name.length > 5 |
| | | ? `${params.name.slice(0, 4)}...` |
| | | : params.name; |
| | | return `{a|${label}} {b|${params.value + "%"}}`; |
| | | }, |
| | | rich: { |
| | | a: { |
| | |
| | | labelLine: { |
| | | show: true, |
| | | length: 4, |
| | | length2: 80, |
| | | length2: 70, |
| | | lineStyle: { |
| | | color: "#dcb018", |
| | | }, |
| | |
| | | <style scoped lang="scss"> |
| | | .bar-chart { |
| | | width: 100%; |
| | | height: calc(100% - 20px); |
| | | height: calc(100% - 10px); |
| | | padding: 20px 0 0; |
| | | |
| | | .bar-contents { |