1.适用需求：两个指标，每个各占一半圆环各为100%
import {getEchartsNum} from 'common/utils/echartsUtils.js'
var data = 60
var data1 = 90
const zbrkPie = {
// title: {
// text: '匹配度',
// x: 'center',
// y: 'center',
// textStyle: {
// fontWeight: 'normal',
// fontSize: 24,
// color: '#fff'
// }
// },
series: [
{
name: 'TDD',
type: 'pie',
clockWise: true,
radius: ['52%', '64%'],
center: ['50%', '40%'],
minAngle: 0,
startAngle: 270,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 40,
shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
}
},
hoverAnimation: false,
label: {
borderRadius: '10'
},
data: [
{
value: data / 2,
name: '诺西',
itemStyle: {
normal: {
// borderWidth: getEchartsNum(10),
// borderColor: 'rgba(0, 0, 0, 0)',
borderRadius: '100',
color: '#15b4d7'
}
}
},
{
value: 100 - data / 2,
name: '诺西占位写死',
tooltip: {
show: true
},
itemStyle: {
normal: {
borderWidth: getEchartsNum(6),
borderColor: 'rgba(0, 0, 0, 0.8)',
color: 'transparent',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: '#0fd5ff'
}
}
}
],
z: 9
},
{
name: '华为',
type: 'pie',
clockWise: false,
minAngle: 0,
radius: ['52%', '64%'],
center: ['50%', '40%'],
itemStyle: {
normal: {
borderWidth: getEchartsNum(6),
borderColor: 'rgba(0, 0, 0, 0.8)',
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
startAngle: 270,
data: [{
value: data1 / 2,
name: '',
tooltip: {
show: false
},
itemStyle: {
normal: {
color: '#dd5b47'
}
}
},
{
value: 100 - data1 / 2,
name: '华为占位写死',
itemStyle: {
normal: {
borderWidth: getEchartsNum(6),
borderColor: 'rgba(0, 0, 0, 0.8)',
color: 'transparent',
label: {
show: false
},
labelLine: {
show: false
}
}
// emphasis: {
// color: '#393d50'
// }
}
}
],
z: 9
},
{
name: '背景图层',
type: 'pie',
clockWise: false,
minAngle: 0,
radius: ['52%', '64%'],
center: ['50%', '40%'],
itemStyle: {
normal: {
borderWidth: getEchartsNum(6),
borderColor: 'rgba(0, 0, 0, 0.8)',
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 40,
shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
}
},
hoverAnimation: false,
startAngle: 270,
data: [{
value: 50,
name: '',
tooltip: {
show: false
},
itemStyle: {
normal: {
color: 'rgba(68, 68, 68, 0.8)'
}
}
},
{
value: 50,
name: '背景图层',
itemStyle: {
normal: {
color: 'rgba(68, 68, 68, 0.8)',
label: {
show: false
},
labelLine: {
show: false
}
}
// emphasis: {
// color: '#393d50'
// }
}
}
]
}
]
}
export {zbrkPie}
2.柱形图
import { getEchartsNum } from 'common/utils/echartsUtils.js'
const wlssfhddxtBar = {
title: {
top: '4%',
text: '折线图',
textStyle: {
fontFamily: 'fontDigit',
color: '#fff',
fontSize: getEchartsNum(24)
},
fontStyle: {
normal: {}
}
},
// backgroundColor: '#191E40',
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.1)',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#7B7DDC'
}
}
},
legend: {
data: ['值', '增量'],
textStyle: {
color: '#B4B4B4'
},
top: '7%'
},
grid: {
left: '0',
top: '20%',
width: '100%',
height: '60%',
y: '12%'
},
xAxis: {
data: ['上行CCE', '下行CCE', '上行PRB', '下行PRB', 'RRC'],
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
fontSize: getEchartsNum(24),
padding: [getEchartsNum(10), 0, 0, 0]
},
axisTick: {
show: false
}
},
yAxis: [{
splitLine: {show: false},
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
show: false
}
},
{
splitLine: {show: false},
axisLine: {
lineStyle: {
color: '#B4B4B4'
}
},
axisLabel: {
formatter: '{value} ㎡'
}
}],
series: [
{
name: '时段1',
type: 'bar',
barWidth: getEchartsNum(10),
stack: '时段1',
itemStyle: {
normal: {
color: '#04a8c4'
}
},
data: [4200, 5000, 5500, 6500, 6400]
},
{
name: '时段1增量',
type: 'bar',
barWidth: getEchartsNum(10),
stack: '时段1',
itemStyle: {
normal: {
color: ' #095865'
}
},
data: [1200, 2000, 4500, 3500, 2400]
},
{
name: '时段2',
type: 'bar',
barWidth: getEchartsNum(10),
stack: '时段2',
itemStyle: {
normal: {
color: '#fff600'
}
},
data: [4100, 4000, 4500, 5500, 4400]
},
{
name: '时段2增量',
type: 'bar',
stack: '时段2',
barWidth: getEchartsNum(10),
itemStyle: {
normal: {
color: '#6e7312'
}
},
data: [4100, 4000, 4500, 5500, 4400]
},
{
name: '时段3',
type: 'bar',
stack: '时段3',
barWidth: getEchartsNum(10),
itemStyle: {
normal: {
color: '#ff8a00'
}
},
data: [4000, 3600, 4200, 5300, 4200]
},
{
name: '时段3增量',
type: 'bar',
stack: '时段3',
barWidth: getEchartsNum(10),
itemStyle: {
normal: {
color: '#704914'
}
},
data: [2000, 300, 1000, 3300, 4100]
},
{
name: '时段4',
type: 'bar',
stack: '时段4',
barWidth: getEchartsNum(10),
itemStyle: {
normal: {
color: '#cc3323'
}
},
data: [2300, 2000, 4200, 5200, 2400]
},
{
name: '时段4增量',
type: 'bar',
barWidth: getEchartsNum(10),
stack: '时段4',
itemStyle: {
normal: {
color: '#5b2722'
}
},
data: [2300, 2000, 4200, 5200, 2400]
}
]
}
export {wlssfhddxtBar}
进度图
import { getEchartsNum } from 'common/utils/echartsUtils.js'
var myColor = ['#0fd5ff', '#4cd964', '#9a87ff', '#d9564c', '#f39436']
const txwlBar1 = {
title: [
{
text: '建设进度',
left: 'left',
x: '40%',
y: '0',
textStyle: {
fontFamily: 'fontDigit',
color: '#fff',
fontSize: getEchartsNum(40)
}
}
],
grid: [
{
x: '2%',
y: '16%',
width: '86%',
height: '80%'}
],
// tooltip: {
// formatter: '{b} ({c})'
// },
xAxis: [
{
gridIndex: 0,
axisTick: {show: false},
axisLabel: {show: false},
splitLine: {show: false},
axisLine: {show: false}
}
],
yAxis: [
{
gridIndex: 0,
interval: 0,
inverse: true,
data: ['基站征址困难', '基站征址困难&光缆建设受阻', '基站建设受阻', '基站建设受阻&光缆建设受阻', '光缆建设受阻'].reverse(),
axisTick: {show: false},
splitLine: {show: false},
axisLine: {show: false},
axisLabel: {
color: '#fff',
align: 'left',
padding: [0, 0, getEchartsNum(64), 0],
textStyle: {
fontSize: getEchartsNum(24),
color: '#fff'
}
}
}
],
series: [
{
name: '建设进度',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
barWidth: '22%',
itemStyle: {
normal: {
shadowBlur: 30,
shadowColor: 'rgba(255,255,255,0.2)', // 设置图形阴影
shadowOffsetX: -5,
shadowOffsetY: 5,
color: function (params) {
var num = myColor.length
return myColor[params.dataIndex % num]
}
}
},
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: function (value, index) {
return index <= 0 ? '#2c95d2' : index <= 1 ? '#4cd964' : '#9a87ff'
},
padding: [0, 0, 0, getEchartsNum(5)],
fontSize: getEchartsNum(24)
}
}},
data: [389, 259, 262, 324, 132].sort()
}
]
}
export {txwlBar1}
3.气泡图
import { getEchartsNum } from 'common/utils/echartsUtils.js'
const wlxtAir = {
title: {
top: '0',
text: '栅格级感知速率',
textStyle: {
fontFamily: 'Helvetica Neue',
color: '#fff',
fontSize: getEchartsNum(36)
},
fontStyle: {
normal: {}
}
},
grid: {
left: '4%',
right: '3%',
bottom: '10%',
width: '96%',
height: '78%'
},
yAxis: {
type: 'category',
data: ['差', '良', '优'],
axisLabel: {
show: true,
color: '#fff',
fontSize: getEchartsNum(20)
},
axisLine: { // y轴
show: false
},
axisTick: {
show: false
}
/* splitLine: {
lineStyle: {
type: 'dashed'
}
} */
},
xAxis: {
type: 'category',
data: ['海口', '三亚', '乐东', '陵水', '儋州', '万宁', '五指山', '临高', '琼中', '东方', '琼海', '澄迈', '白沙', '保亭'],
axisLabel: {
show: true,
rotate: 30,
color: '#fff',
fontSize: getEchartsNum(16)
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
series: [{
type: 'scatter',
name: '1990',
symbol: 'circle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolSize: function (data) {
return (Math.sqrt(data[2])) / 7
},
itemStyle: {
normal: {
color: (params) => {
let color = ''
if (params.data[1] === '优') {
color = '#21e12e'
} else if (params.data[1] === '良') {
color = '#ffff00'
} else {
color = '#d7422c'
}
// build a color map as your need.
// let colorList = [
// '#DF6A85',
// '#716AA9',
// '#34BCC3',
// '#FC6D44',
// '#0B9FCA',
// '#73C234'
// ]
// return colorList[params.dataIndex]
return color
}
}
},
label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[2]
},
position: 'top',
fontSize: getEchartsNum(24)
}
},
data: [
['海口', '优', 50],
['三亚', '优', 50],
['乐东', '优', 100],
['陵水', '优', 50],
['乐东', '优', 40],
['儋州', '优', 40],
['万宁', '优', 60],
['五指山', '优', 100],
['临高', '优', 40],
['琼中', '优', 40],
['东方', '优', 40],
['琼海', '优', 40],
['澄迈', '优', 40],
['白沙', '优', 40],
['保亭', '优', 40],
['海口', '良', 50],
['三亚', '良', 60],
['陵水', '良', 80],
['乐东', '良', 210],
['儋州', '良', 100],
['万宁', '良', 210],
['五指山', '良', 100],
['临高', '良', 10],
['琼中', '良', 110],
['东方', '良', 110],
['琼海', '良', 110],
['澄迈', '良', 110],
['白沙', '良', 110],
['保亭', '良', 110],
['五指山', '差', 100],
['临高', '差', 100],
['琼中', '差', 100],
['儋州', '差', 40],
['万宁', '差', 100],
['乐东', '差', 10],
['陵水', '差', 100],
['三亚', '差', 100],
['海口', '差', 100],
['东方', '差', 100],
['琼海', '差', 100],
['澄迈', '差', 100],
['白沙', '差', 100],
['保亭', '差', 100]
]
}]
}
export {wlxtAir}
接口取数：
// 栅格级感知速率 各地市数据
async getNetSynergyCitysList () {
let info = await api.getNetSynergyCitysList()
if (info.status !== 200) { // 接口请求出错
return
}
let data = info.data
var dataList = []
let cityList = []
var count = 0
for (var item of data) {
if (!cityList.includes(item.city_name)) {
cityList.push(item.city_name)
}
let temp = []
temp.push(item.city_name)
if (item.index_flag === '1') {
temp.push('差')
} else if (item.index_flag === '2') {
temp.push('良')
} else {
temp.push('优')
}
temp.push(item.index_value)
dataList[count++] = temp
}
wlxtAir.series[0].data = dataList
wlxtAir.xAxis.data = cityList
this.chartAir.setOption(wlxtAir, true)
},
