| data: [ |
| { name: '机组1', value: 28 }, |
| { name: '机组2', value: 27 }, |
| { name: '机组3', value: 30 }, |
| { name: '机组4', value: 32 }, |
| { name: '机组5', value: 22 } |
| ], |
| color: [ |
| { |
| startColor: '#53C7FF', |
| endColor: 'rgba(83, 199, 255, 0.1)', |
| topStartColor: '#53C7FF', |
| topEndColor: '#53C7FF', |
| leftStartColor: '#53C7FF', |
| leftEndColor: 'rgba(83, 199, 255, 0.1)', |
| rightStartColor: '#53C7FF', |
| rightEndColor: 'rgba(83, 199, 255, 0.1)' |
| }, |
| { |
| startColor: '#76C6C4', |
| endColor: 'rgba(118, 198, 196, 0.1)', |
| topStartColor: '#76C6C4', |
| topEndColor: '#76C6C4', |
| leftStartColor: '#76C6C4', |
| leftEndColor: 'rgba(118, 198, 196, 0.1)', |
| rightStartColor: '#76C6C4', |
| rightEndColor: 'rgba(118, 198, 196, 0.1)' |
| } |
| ] |
| { |
| tooltip: { |
| trigger: 'axis', |
| }, |
| xAxis: { |
| type: 'category', |
| data: this.data.map((i) => i.name), |
| // x坐标轴为虚线 |
| axisLine: { |
| lineStyle: { |
| color: '#BAC6D0', |
| }, |
| }, |
| // 不展示下面｜ |
| axisTick: { |
| show: false, |
| }, |
| axisLabel: { |
| show: true, |
| color: '#B0E1FF', |
| fontSize: 12, // 字体大小 |
| }, |
| }, |
| yAxis: { |
| type: 'value', |
| // 不展示刻度线 |
| splitLine: { |
| show: true, |
| lineStyle: { |
| color: ['#B2C2D3'], |
| type: 'dashed', |
| opacity: 0.5, |
| }, |
| }, |
| axisLabel: { |
| show: true, |
| color: '#B0E1FF', |
| fontSize: 12, // 字体大小 |
| }, |
| }, |
| // 栅格 |
| grid: { |
| left: 0, |
| right: 0, |
| bottom: 0, |
| top: 10, |
| containLabel: true, |
| }, |
| series: [ |
| // 数据低下的圆片 |
| // { |
| // name: '', |
| // type: 'pictorialBar', |
| // symbol: 'diamond', |
| // symbolSize: [16, 9], // 宽，高 |
| // symbolOffset: [0, 5], // 左 上 |
| // symbolPosition: 'start', |
| // z: 1, |
| // data: this.data, |
| // itemStyle: { |
| // color: (params) => { |
| // return new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| // { offset: 0, color: params.data.topStartColor }, |
| // { offset: 1, color: params.data.topEndColor }, |
| // ]) |
| // }, |
| // }, |
| // }, |
| // 数据的柱状图 |
| { |
| name: '', |
| type: 'bar', |
| barWidth: 8, // 柱条的宽度，不设时自适应。 |
| data: this.data, |
| itemStyle: { |
| color: (params) => { |
| const i = params.dataIndex |
| return new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| { offset: 0, color: i%2 === 1 ? _this.color[0].leftStartColor : _this.color[1].leftStartColor }, |
| { offset: 1, color: i%2 === 1 ? _this.color[0].leftEndColor : _this.color[1].leftEndColor } |
| ]) |
| } |
| } |
| }, |
| { |
| name: '', |
| type: 'bar', |
| barWidth: 8, // 柱条的宽度，不设时自适应。 |
| barGap: 0, // 不同系列的柱间距离 |
| data: this.data, |
| itemStyle: { |
| color: (params) => { |
| const i = params.dataIndex |
| return new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| { offset: 0, color: i%2 === 1 ? _this.color[0].rightStartColor : _this.color[1].rightStartColor }, |
| { offset: 1, color: i%2 === 1 ? _this.color[0].rightEndColor : _this.color[1].rightEndColor } |
| ]) |
| }, |
| borderWidth: 0.1, |
| borderColor: 'transparent' |
| } |
| }, |
| // 数据顶部的样式 |
| { |
| name: '', |
| type: 'pictorialBar', |
| symbol: 'diamond', |
| symbolSize: [16, 9], |
| symbolOffset: [0, -4], |
| symbolPosition: 'end', |
| z: 3, |
| itemStyle: { |
| color: (params) => { |
| const i = params.dataIndex |
| return new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| { offset: 0, color: i%2 === 1 ? _this.color[0].topStartColor : _this.color[1].topStartColor}, |
| { offset: 1, color: i%2 === 1 ? _this.color[0].topEndColor : _this.color[1].topEndColor } |
| ]) |
| }, |
| label: { |
| show: false, // 开启显示 |
| position: 'top', // 在上方显示 |
| textStyle: { |
| fontSize: '12', |
| color: '#B0E1FF' |
| } |
| } |
| }, |
| data: this.data |
| } |
| ] |
| } |
