1.適用需求：兩個指標，每個各占一半圓環(huán)各為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: ' ({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: ['差', '良', '優(yōu)'],
? ? 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] === '優(yōu)') {
? ? ? ? ? ? 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: [
? ? ? ['?？?, '優(yōu)', 50],
? ? ? ['三亞', '優(yōu)', 50],
? ? ? ['樂東', '優(yōu)', 100],
? ? ? ['陵水', '優(yōu)', 50],
? ? ? ['樂東', '優(yōu)', 40],
? ? ? ['儋州', '優(yōu)', 40],
? ? ? ['萬寧', '優(yōu)', 60],
? ? ? ['五指山', '優(yōu)', 100],
? ? ? ['臨高', '優(yōu)', 40],
? ? ? ['瓊中', '優(yōu)', 40],
? ? ? ['東方', '優(yōu)', 40],
? ? ? ['瓊海', '優(yōu)', 40],
? ? ? ['澄邁', '優(yōu)', 40],
? ? ? ['白沙', '優(yōu)', 40],
? ? ? ['保亭', '優(yōu)', 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}
接口取數(shù)：
// 柵格級感知速率 各地市數(shù)據(jù)
? ? 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('優(yōu)')
? ? ? ? }
? ? ? ? temp.push(item.index_value)
? ? ? ? dataList[count++] = temp
? ? ? }
? ? ? wlxtAir.series[0].data = dataList
? ? ? wlxtAir.xAxis.data = cityList
? ? ? this.chartAir.setOption(wlxtAir, true)
? ? },
