|
|
@@ -84,13 +84,6 @@ export default {
|
|
|
initChart () {
|
|
|
const myChart = echarts.init(this.$refs.dom)
|
|
|
const option = {
|
|
|
- name: '仪表盘',
|
|
|
- grid: {
|
|
|
- top: '0px',
|
|
|
- bottom: '5px',
|
|
|
- left: '0px',
|
|
|
- right: '0px'
|
|
|
- },
|
|
|
title: {
|
|
|
show: true,
|
|
|
text: [`{titleBg|关注率}`],
|
|
|
@@ -104,69 +97,112 @@ export default {
|
|
|
height: 26,
|
|
|
width: 70,
|
|
|
color: '#00CAFF',
|
|
|
- fontSize: 16
|
|
|
+ fontSize: 14
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'gauge',
|
|
|
- radius: '100%',
|
|
|
- name: '绘服务',
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- width: 15,
|
|
|
- color: [
|
|
|
- [
|
|
|
- 0,
|
|
|
- new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: this.colorArr[1]
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: this.colorArr[2]
|
|
|
- }
|
|
|
- ])
|
|
|
- ],
|
|
|
- [
|
|
|
- 1, this.colorArr[0]
|
|
|
- ]
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- title: {
|
|
|
- offsetCenter: [0, '25%'],
|
|
|
- fontSize: 14,
|
|
|
- fontFamily: 'Microsoft YaHei',
|
|
|
- fontWeight: '400',
|
|
|
- color: '#5774A2'
|
|
|
- },
|
|
|
- detail: {
|
|
|
- formatter: '{value}%',
|
|
|
- offsetCenter: [0, '-10%'],
|
|
|
- fontSize: 22,
|
|
|
- fontFamily: 'DS-Digital',
|
|
|
- fontWeight: 'bold',
|
|
|
- color: '#00D2ED'
|
|
|
- },
|
|
|
- data: [{ value: 75, name: '绘服务' }]
|
|
|
+ angleAxis: {
|
|
|
+ show: false,
|
|
|
+ max: 100 * 360 / 270, // -45度到225度，二者偏移值是270度除360度
|
|
|
+ type: 'value',
|
|
|
+ startAngle: 225, // 极坐标初始角度
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
}
|
|
|
+ },
|
|
|
+ barMaxWidth: 16, // 圆环宽度
|
|
|
+ radiusAxis: {
|
|
|
+ show: false,
|
|
|
+ type: 'category'
|
|
|
+ },
|
|
|
+ // 圆环位置和大小
|
|
|
+ polar: {
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ radius: '140'
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ type: 'bar',
|
|
|
+ data: [{ // 上层圆环，显示数据
|
|
|
+ value: 75,
|
|
|
+ itemStyle: {
|
|
|
+ color: { // 图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 1, // 从左到右 0-1
|
|
|
+ y2: 0,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0,
|
|
|
+ color: this.colorArr[1]
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: this.colorArr[2]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ // barGap: '-100%', // 柱间距离,上下两层圆环重合
|
|
|
+ coordinateSystem: 'polar',
|
|
|
+ roundCap: true // 顶端圆角从 v4.5.0 开始支持
|
|
|
+ // z: 2 // 圆环层级，同zindex
|
|
|
+ },
|
|
|
+ { // 下层圆环，显示最大值
|
|
|
+ type: 'bar',
|
|
|
+ data: [{
|
|
|
+ value: 100,
|
|
|
+ itemStyle: {
|
|
|
+ color: this.colorArr[0]
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ barGap: '-100%',
|
|
|
+ coordinateSystem: 'polar',
|
|
|
+ roundCap: true,
|
|
|
+ z: 1
|
|
|
+ },
|
|
|
+ // 仪表盘
|
|
|
+ {
|
|
|
+ name: '关注率',
|
|
|
+ type: 'gauge',
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLabel: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ pointer: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ offsetCenter: [0, '45%'],
|
|
|
+ fontSize: 14,
|
|
|
+ fontFamily: 'Microsoft YaHei',
|
|
|
+ fontWeight: '400',
|
|
|
+ color: '#5774A2'
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ formatter: '{value}%',
|
|
|
+ offsetCenter: [0, '-10%'],
|
|
|
+ fontSize: 22,
|
|
|
+ fontFamily: 'DS-Digital',
|
|
|
+ fontWeight: 'bold',
|
|
|
+ color: '#00D2ED'
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: 75,
|
|
|
+ name: '绘服务'
|
|
|
+ // name: 75 + '\n' + '{a|' + '首要污染物：PM10' + '}'
|
|
|
+ }]
|
|
|
+ }
|
|
|
]
|
|
|
}
|
|
|
myChart.setOption(option)
|
