@@ -107,11 +107,13 @@ export default {
index2: 0,
chart: null,
scrollList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
+
+ dataList: [2, 1.2, 2.4, 3.6],
}
},
mounted() {
this.$nextTick(() => {
- // this.initChart()
+ this.initChart()
this.initChart2()
})
},
@@ -121,93 +123,79 @@ export default {
this.setOptions()
},
setOptions() {
- const gaugeData = [
- {
- value: 20,
- name: 'Perfect',
- title: {
- offsetCenter: ['0%', '-30%'],
- },
- detail: {
- valueAnimation: true,
- offsetCenter: ['0%', '-20%'],
- },
- },
- {
- value: 40,
- name: 'Good',
- title: {
- offsetCenter: ['0%', '0%'],
- },
- detail: {
- valueAnimation: true,
- offsetCenter: ['0%', '10%'],
- },
- },
- {
- value: 60,
- name: 'Commonly',
- title: {
- offsetCenter: ['0%', '30%'],
- },
- detail: {
- valueAnimation: true,
- offsetCenter: ['0%', '40%'],
- },
- },
- ]
this.chart.setOption({
- series: [
- {
- type: 'gauge',
- startAngle: 90,
- endAngle: -270,
- pointer: {
- show: false,
- },
- progress: {
- show: true,
- overlap: false,
- roundCap: true,
- clip: false,
- itemStyle: {
- borderWidth: 1,
- borderColor: '#464646',
+ polar: {
+ radius: [100, '80%'],
+ },
+ angleAxis: {
+ max: 4,
+ startAngle: 90,
+ show: false, //隐藏角度轴（圆心角）
+ interval: 100,
+ // splitLine: {
+ // show: false //隐藏分隔线
+ // },
+ },
+ radiusAxis: {
+ show: false,
+ type: 'category',
+ data: ['缺少', '已用', '到货', '现有'],
+ z: 3,
+ axisLabel: {
+ show: false,
+ color: '#f00',
+ },
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ //去掉移动的指示线
+ type: 'none',
+ },
+ textStyle: {
+ width: 160,
+ height: 250,
+ lineHeight: 24,
+ },
+ // position: ['15%', '20%'], //显示的位置
+ formatter: params => {
+ let dataStr = `
`
+ params.forEach(item => {
+ dataStr += `
+
+
+ ${item.seriesName}
+ ${item.data}
+
+
`
+ })
+ return dataStr
+ },
+ },
+ series: {
+ type: 'bar',
+ barWidth: 20,
+ data: this.dataList,
+ coordinateSystem: 'polar',
+ label: {
+ show: false,
+ position: 'middle',
+ formatter: '{b}: {c}',
+ },
+ roundCap: true,
+ itemStyle: {
+ borderColor: 'green',
+ opacity: 0.8,
+ borderWidth: 1,
+ normal: {
+ //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+ color: function (params) {
+ var colorList = ['#fa8c16', '#8bb1ed', '#55c5a2', '#f6d97e']
+ return colorList[params.dataIndex]
},
},
- axisLine: {
- lineStyle: {
- width: 40,
- },
- },
- splitLine: {
- show: false,
- distance: 0,
- length: 10,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: false,
- distance: 50,
- },
- data: gaugeData,
- title: {
- fontSize: 14,
- },
- detail: {
- width: 50,
- height: 14,
- fontSize: 14,
- color: 'auto',
- borderColor: 'auto',
- borderRadius: 20,
- borderWidth: 1,
- formatter: '{value}%',
- },
},
- ],
+ },
})
},
initChart2() {
+
+