import * as echarts from 'echarts'
/** 255
* 统一样式，加载
* @param {*} id
* @param {*} option
*/
export function loadEcharts(id, option) {
var myChart = echarts.init(document.getElementById(id))
if (option.textStyle == null) {
option.textStyle = {
fontFamily: 'Microsoft YaHei',
color: '#ffffff'
}
}
// 使用刚指定的配置项和数据显示图表。
myChart.clear()
myChart.setOption(option, true)
window.addEventListener('resize', function() {
myChart.resize()
})
return myChart
}
const colorX = '#c7e7ff'
const colorY = '#7696c5'
// 脉链看板
export function mapArea() {
}
export function pie1(data) {
const titleArr = []
const seriesArr = []
const colors = [['#389af4', '#dfeaff'], ['#ff8c37', '#ffdcc3'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']]
data.forEach(function(item, index) {
titleArr.push(
{
text: item.name,
left: index * 20 + 9.5 + '%',
top: '55%',
textAlign: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: '16',
color: colors[index][0],
textAlign: 'center'
}
}
)
seriesArr.push(
{
name: item.name,
type: 'pie',
clockWise: false,
radius: [50, 60], // 调整饼图大小
itemStyle: {
normal: {
color: colors[index][0],
shadowColor: colors[index][0],
shadowBlur: 0,
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
center: [index * 20 + 10 + '%', '50%'],
data: [{
value: item.value,
label: {
normal: {
formatter: function(params) {
return params.value + '%'
},
position: 'center',
show: true,
textStyle: {
fontSize: '16',
fontWeight: 'normal',
// fontWeight: 'bold',
color: colors[index][0]
}
}
}
}, {
value: 100 - item.value,
name: 'invisible',
itemStyle: {
normal: {
color: colors[index][1]
},
emphasis: {
color: colors[index][1]
}
}
}]
}
)
})
const option = {
backgroundColor: 'transparent',
title: titleArr,
series: seriesArr
}
return option
}
export function bar1(data1, data2) {
const titleText = '工厂人员出勤率'
const path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'
// const data1 = ['80', '90', '70', '30', '50']
// const data2 = ['70', '60', '50', '40', '30']
const option = {
backgroundColor: 'transparent',
// tooltip: {
// show: false,
// trigger: 'axis',
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
// },
// formatter: function(e) {
// if (e.length > 1) {
// var S = e[1].data - e[0].data
// return e[0].axisValue + ':
差额=当前－年初
=' + S
// } else if (e.length = 1) {
// return e[0].axisValue + ':
' + e[0].seriesName + '=' + e[0].data
// }
// }
// },
title: {
text: titleText,
x: '40%',
y: '0%',
textStyle: {
// color: '#fff',
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
}
},
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: '15%',
containLabel: true
},
legend: {
show: false,
// data: ['title1', 'title2'],
data: ['title1'],
left: 220,
top: 10,
textStyle: {
color: '#00ffff',
fontSize: 14
},
itemWidth: 12,
itemHeight: 10,
itemGap: 35,
color: '#242424'
},
xAxis: {
type: 'category',
// data: ['车间一', '车间二', '车间三', '车间四', '车间五'],
data: ['浙江皇冠', '永康皇冠', '北辰电机', '恒泰皇冠园林', '迈拓塑业'],
axisLine: {
lineStyle: {
show: true,
lineStyle: {
color: '#6A989E'
}
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei',
color: colorX, // x轴颜色
fontWeight: 'normal',
fontSize: '12',
lineHeight: 22
}
}
// splitLine:{
// show:true,
// lineStyle: {
// type: 'dashed',
// color: 'rgba(135,140,147,0.8)'
// }
// },
},
yAxis:
{
name: '%',
nameTextStyle: {
color: colorY,
fontSize: 14,
lineHeight: 20
},
boundaryGap: false,
splitNumber: 4,
type: 'value',
axisLabel: {
textStyle: {
fontSize: 14,
color: '#7696c5'
// color: this.colorY
}
},
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
},
// {
// type: 'value',
// // name: '数量（单位：个）',
// name: '',
// nameTextStyle: {
// color: '#ffffff'
// },
// axisLine: {
// show: false,
// lineStyle: {
// type: 'dashed',
// color: 'rgba(135,140,147,0.8)'
// }
// },
// splitLine: {
// show: true,
// lineStyle: {
// color: 'rgba(135,140,147,1)' // 左侧显示线
// }
// },
// axisLabel: {
// formatter: '{value}',
// color: colorY,
// fontSize: 14
// }
// },
series: [
{
type: 'pictorialBar',
symbol: path,
symbolSize: [30, 8],
// symbolOffset: [-18, -4],
symbolOffset: [0, -4],
symbolPosition: 'end',
z: 12,
color: '#3440FF',
data: data1
},
// {
// type: 'pictorialBar',
// symbol: path,
// symbolSize: [30, 8],
// symbolOffset: [18, -4],
// // symbolOffset: [20, -5],
// symbolPosition: 'end',
// z: 12,
// color: '#FF1155',
// data: data2
// },
{
type: 'pictorialBar',
symbol: path,
symbolSize: [30, 8],
// symbolOffset: [-18, 4],
symbolOffset: [0, 4],
z: 12,
color: 'rgba(126,192,238,0.6)',
data: data1
},
// {
// name: '',
// type: 'pictorialBar',
// symbol: path,
// symbolSize: [30, 8],
// // symbolOffset: [20, 4],
// symbolOffset: [18, 4],
// color: '#FFC0CB',
// z: 12,
// data: data2
// },
{
name: 'title1',
type: 'bar',
barWidth: '30',
itemStyle: {
normal: {
opacity: 0.7,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'blue'
}, {
offset: 1,
color: '#7EC0EE'
}]),
barBorderRadius: 0
}
},
label: {
show: true,
// position: ['-18','-18'],
position: 'top',
color: '#00f8ff',
fontSize: 12
},
data: data1
}
// {
// name: 'title2',
// type: 'bar',
// barWidth: '30',
// itemStyle: {
// normal: {
// opacity: 0.7,
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: '#FF2246'
// }, {
// offset: 1,
// color: '#FFC0CB'
//
// }]),
// barBorderRadius: 0
// }
//
// },
// label: {
// show: true,
// // position: ['18','-18'],
// position: 'top',
// color: '#00f8ff',
// fontSize: 12
// },
// data: data2
// }
]
}
return option
}
export function line1(dataY, dataY2, dataY3, dataY4, dataY5) {
const option = {
backgroundColor: 'transparent',
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: '15%',
containLabel: true
},
title: {
// text: '销售额概览',
text: '各工厂能耗',
left: '50%',
top: '0%',
textAlign: 'center',
textStyle: {
// color: '#fff',
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#ddd'
}
},
backgroundColor: 'rgba(255,255,255,1)',
padding: [5, 10],
textStyle: {
color: '#7588E4'
},
extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
},
legend: {
show: false,
right: 20,
orient: 'vertical',
data: ['浙江皇冠', '永康皇冠', '北辰电机', '恒泰皇冠园林', '迈拓塑业']
},
xAxis: {
// data: ['00:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00',"22:00"],
// data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// type: 'category',
// boundaryGap: true,
// axisLabel: {
// interval: 0,
// formatter: '{value}',
// fontSize: 14,
// margin: 20,
// textStyle: {
// // color: this.colorX
// color: '#c7e7ff'
// }
// },
// axisLine: {
// lineStyle: {
// color: '#032c58'
// }
// },
// splitLine: {
// show: false,
// lineStyle: {
// color: '#032c58'
// }
// },
// axisTick: {
// show: false
// }
// name: '月',
// nameTextStyle: {
// color: colorX,
// fontSize: 14,
// lineHeight: 20
// },
boundaryGap: false,
// splitLine: {
// show: false,
// interval: 'auto',
// lineStyle: {
// color: ['#D4DFF5']
// }
// },
axisTick: {
show: false
},
axisLine: {
lineStyle: {
show: true,
lineStyle: {
color: '#6A989E'
}
}
},
axisLabel: {
margin: 10,
textStyle: {
color: colorX,
fontSize: 14
}
}
},
yAxis:
{
name: '',
nameTextStyle: {
color: colorY,
fontSize: 14,
lineHeight: 20
},
boundaryGap: false,
splitNumber: 5,
type: 'value',
// offset: -30,
axisLabel: {
textStyle: {
fontSize: 14,
color: '#7696c5'
// color: this.colorY
}
},
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
},
series: [
{
name: '浙江皇冠',
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 6,
// data: ['200', '400', '500', '300', '400', '500', '600', '800', '900', '1000', '1100', '1322'],
data: dataY,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,215,236,0.5)'
}, {
offset: 1,
color: 'rgba(0,215,236,0.2)'
}], false)
}
},
itemStyle: {
normal: {
// color: '#f7b851'
// color: `rgb(73, 226, 196)`
color: `rgb(0, 215, 236)`
}
},
lineStyle: {
normal: {
width: 3
}
}
},
{
name: '永康皇冠',
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 6,
// data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
data: dataY2,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(60,244,184,0.5)'
}, {
offset: 1,
color: 'rgba(60,244,184,0.2)'
}], false)
}
},
itemStyle: {
normal: {
color: `rgb(60, 244, 184)`
}
},
lineStyle: {
normal: {
width: 3
}
}
},
{
name: '北辰电机',
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 6,
// data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
data: dataY3,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(55,183,255,0.5)'
}, {
offset: 1,
color: 'rgba(55,183,255,0.2)'
}], false)
}
},
itemStyle: {
normal: {
// color: '#58c8da'
color: `rgb(55, 183, 255)`
}
},
lineStyle: {
normal: {
width: 3
}
}
},
{
name: '恒泰皇冠园林',
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 6,
// data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
data: dataY4,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(26,202,200,0.5)'
}, {
offset: 1,
color: 'rgba(26,202,200,0.2)'
}], false)
}
},
itemStyle: {
normal: {
// color: '#58c8da'
color: `rgb(26, 202, 200)`
}
},
lineStyle: {
normal: {
width: 3
}
}
},
{
name: '迈拓塑业',
type: 'line',
smooth: true,
showSymbol: false,
symbol: 'circle',
symbolSize: 6,
// data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
data: dataY5,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(243,94,94,0.5)'
}, {
offset: 1,
color: 'rgba(243,94,94,0.2)'
}], false)
}
},
itemStyle: {
normal: {
// color: '#58c8da'
color: `rgb(243, 94, 94)`
}
},
lineStyle: {
normal: {
width: 3
}
}
}
]
}
return option
}
export function pie2(title, scaleData) {
var rich = {
white: {
color: '#ddd',
align: 'center',
padding: [5, 0]
}
}
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
var data = []
for (var i = 0; i < scaleData.length; i++) {
data.push({
value: scaleData[i].value,
name: scaleData[i].name,
itemStyle: {
normal: {
borderWidth: 5,
shadowBlur: 30,
borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: '#7777eb'
}, {
offset: 1,
color: '#70ffac'
}]),
shadowColor: 'rgba(142, 152, 241, 0.6)'
}
}
}, {
value: 4,
name: '',
itemStyle: placeHolderStyle
})
}
var seriesObj = [{
name: '',
type: 'pie',
clockWise: false,
radius: [60, 65],
top: '10%',
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: 'outside',
// color: '#ddd',
color: colorX,
formatter: function(params) {
var percent = 0
var total = 0
for (var i = 0; i < scaleData.length; i++) {
total += scaleData[i].value
}
percent = ((params.value / total) * 100).toFixed(0)
if (params.name !== '') {
return params.name + '\n{white|' + '' + percent + '%}'
} else {
return ''
}
},
rich: rich
},
labelLine: {
show: false
}
}
},
data: data
}]
const option = {
backgroundColor: 'transparent',
tooltip: {
show: false
},
top: 'middle',
title: {
text: title,
left: '50%',
top: '7%',
textAlign: 'center',
textStyle: {
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
}
},
legend: {
show: false
},
toolbox: {
show: false
},
series: seriesObj
}
return option
}
export function bar2(list) {
// const list = [500, 400, 300, 200, 200]
const yName = ['浏览客户', '进店客户', '认购客户', '下单客户', '再次购买']
const xData = [500, 400, 300, 200, 100]
// const color = ['#ff3259', '#ff6160', '#ffb065', '#fef568', '#1a6df1', '#15a0ff', '#11e2ff', '#58febe']
const color = ['#ff3259', '#ff6160', '#ffb065', '#fef568', '#1a6df1']
const barWidth = 15
const option = {
backgroundColor: 'transparent',
title: {
text: '平台链接客户',
left: '50%',
top: '5%',
textAlign: 'center',
textStyle: {
// color: '#fff',
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
}
},
xAxis: {
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: '15%',
containLabel: true
},
yAxis: [{
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: colorX
}
},
data: yName
}],
series: [{ // 内
type: 'bar',
barWidth,
legendHoverLink: false,
symbolRepeat: true,
silent: true,
itemStyle: {
normal: {
// barBorderRadius: [4, 4, 4, 4],
color: function(params) {
var colorlist = color
return colorlist[params.dataIndex]
}
}
},
data: list,
z: 1,
animationEasing: 'elasticOut'
},
{ // 背景
type: 'pictorialBar',
animationDuration: 0,
symbolRepeat: 'fixed',
symbolMargin: '20%',
symbol: 'roundRect',
symbolSize: [6, barWidth],
itemStyle: {
normal: {
color: 'rgba(255,255,255,0.3)'
}
},
data: xData,
z: 0,
animationEasing: 'elasticOut'
},
{ // 分隔
type: 'pictorialBar',
itemStyle: {
color: '#051e43'
},
symbolRepeat: 'fixed',
symbolMargin: 4,
symbol: 'roundRect',
symbolClip: true,
symbolSize: [2, barWidth],
symbolPosition: 'start',
symbolOffset: [0, 0],
data: list,
z: 2,
animationEasing: 'elasticOut'
}
]
}
return option
}
export function custom1() {
}
export function bar3() {
const a1 = 20 + Math.floor(Math.random() * 80)
const a2 = 20 + Math.floor(Math.random() * 80)
const a3 = 20 + Math.floor(Math.random() * 80)
const a4 = 20 + Math.floor(Math.random() * 80)
const a5 = 20 + Math.floor(Math.random() * 80)
const a6 = 20 + Math.floor(Math.random() * 80)
const a7 = 20 + Math.floor(Math.random() * 80)
const a8 = 20 + Math.floor(Math.random() * 80)
const a9 = 20 + Math.floor(Math.random() * 80)
const a10 = 20 + Math.floor(Math.random() * 80)
const a11 = 20 + Math.floor(Math.random() * 80)
const a12 = 20 + Math.floor(Math.random() * 80)
const list = [
{
key: '进货数量',
value: [
{ value: a1 },
{ value: a2 },
{ value: a3 },
{ value: a4 },
{ value: a5 },
{ value: a6 },
{ value: a8 },
{ value: a9 },
{ value: a10 },
{ value: a11 },
{ value: a12 }
]
}, {
key: '合格数量',
value: [
{ value: a1 - 2 },
{ value: a2 - 3 },
{ value: a3 - 5 },
{ value: a4 - 1 },
{ value: a5 - 2 },
{ value: a6 - 4 },
{ value: a7 - 5 },
{ value: a8 - 2 },
{ value: a9 - 2 },
{ value: a10 - 6 },
{ value: a11 - 1 },
{ value: a12 - 3 }
]
}, {
key: '不合格数量',
value: [
{ value: 2 },
{ value: 3 },
{ value: 5 },
{ value: 1 },
{ value: 2 },
{ value: 4 },
{ value: 5 },
{ value: 2 },
{ value: 2 },
{ value: 6 },
{ value: 1 },
{ value: 3 }
]
}
]
const color = ['26,171,234', '73,226,196', '255,221,97']
// const xList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const xList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const seriesData = []
list.forEach((r, i) => {
var o = {
name: r.key,
type: 'bar',
smooth: false,
yAxisIndex: 0,
showSymbol: true,
showAllSymbol: true,
barWidth: 8,
zlevel: 3,
lineStyle: {
normal: {
width: 2,
color: `rgba(${color[i]})`
}
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${color[i]}, 0.0)`// 0% 处的颜色
},
{
offset: 1,
color: `rgba(${color[i]}, 0.0)` // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
} // 渐变颜色
}
},
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: `rgba(${color[i]}, 1)`// 0% 处的颜色
},
{
offset: 1,
color: `rgba(${color[i]}, 0.2)` // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
} // 渐变颜色
}
},
data: r.value.map(r => r.value)
}
// if (i === 0) {
// xList = r.value.map(r => r.key)
// }
// if (r.percent) {
// this.$set(o, 'symbolSize', 6)
// } else {
// this.$set(o, 'symbol', 'path://M0,10 L10,10 L5,0 L0,10 z')
// }
seriesData.push(o)
})
const option = {
backgroundColor: 'transparent',
legend: {
show: true,
data: list.map(r => r.key),
top: '2%',
itemHeight: 20,
itemWidth: 20,
textStyle: {
fontSize: 14,
color: 'F1F1F3'
// color: colorX
},
right: '1%'
},
title: {
text: '合格率分析',
left: '28%',
top: '2%',
textAlign: 'center',
textStyle: {
// color: '#fff',
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
}
},
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: '15%',
containLabel: true
},
tooltip: {
show: true,
trigger: 'axis', // axis , item
backgroundColor: 'RGBA(0, 0, 0, 0.3)',
borderColor: 'rgba(0, 151, 251, 0.6)',
borderWidth: 1,
borderRadius: 0,
textStyle: {
color: '#BCE9FC',
fontSize: 14,
align: 'left'
}
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
formatter: '{value}',
fontSize: 14,
margin: 20,
textStyle: {
// color: this.colorX
color: '#c7e7ff'
}
},
axisLine: {
lineStyle: {
color: '#032c58'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: false
},
data: xList
}],
yAxis: [
{
boundaryGap: false,
splitNumber: 4,
type: 'value',
name: '%',
nameTextStyle: {
color: colorY,
fontSize: 14,
lineHeight: 20
},
axisLabel: {
textStyle: {
fontSize: 14,
color: '#7696c5'
// color: this.colorY
}
},
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
},
{
boundaryGap: false,
splitNumber: 4,
type: 'value',
axisLabel: {
textStyle: {
fontSize: 14,
// color: this.colorY
color: '#7696c5'
}
},
nameTextStyle: {
color: '#fff',
fontSize: 14,
lineHeight: 40
},
splitLine: {
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: false
},
axisTick: {
show: true
}
}
],
series: seriesData
}
return option
}
export function bar4() {
const data = [{
name: '浙江皇冠',
value: Math.floor(Math.random() * 10 + 90)
},
{
name: '永康皇冠',
value: Math.floor(Math.random() * 10 + 90)
},
{
name: '北辰电机',
value: Math.floor(Math.random() * 10 + 90)
},
{
name: '恒泰皇冠园林',
value: Math.floor(Math.random() * 10 + 90)
},
{
name: '迈拓塑业',
value: Math.floor(Math.random() * 10 + 90)
}
// {
// name: '车间五',
// value: Math.floor(Math.random() * 10 + 90)
// }
]
const getArrByKey = (data, k) => {
const key = k || 'value'
const res = []
if (data) {
data.forEach(function(t) {
res.push(t[key])
})
}
return res
}
const getSymbolData = (data) => {
const arr = []
for (var i = 0; i < data.length; i++) {
arr.push({
value: data[i].value,
symbolPosition: 'end'
})
}
return arr
}
// console.log(getSymbolData(data));
const option = {
backgroundColor: 'transparent',
grid: {
left: '0%',
right: '4%',
bottom: '4%',
top: '15%',
containLabel: true
},
title: {
text: '工厂达成率',
x: '46%',
y: '5%',
textStyle: {
// color: '#fff',
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
},
subtextStyle: {
color: '#90979c',
fontSize: '16'
}
},
xAxis: {
show: false
},
yAxis: [{
triggerEvent: true,
show: true,
inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
interval: 0,
color: colorY,
align: 'left',
margin: 60,
formatter: function(value, index) {
return '{title|' + value + '}'
},
rich: {
title: {
width: 50,
align: 'right',
fontSize: 18
}
}
}
}, {
triggerEvent: true,
show: true,
inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
shadowOffsetX: '-20px',
// color: ['#fff'],
color: colorX,
align: 'left',
verticalAlign: 'center',
lineHeight: 40,
fontSize: 18,
formatter: function(value, index) {
return data[index].value + '%'
}
}
}],
series: [{
name: 'XXX',
type: 'pictorialBar',
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
symbolSize: [50, 50],
symbolOffset: [20, 0],
z: 12,
itemStyle: {
normal: {
color: '#fff'
}
},
data: getSymbolData(data)
}, {
name: '条',
type: 'bar',
showBackground: true,
// barBorderRadius: 30,
yAxisIndex: 0,
data: data,
barWidth: 10,
// align: left,
itemStyle: {
normal: {
color: 'rgba(41, 162, 245, 1)'
// barBorderRadius: 10
}
// color: '#A71A2B',
// barBorderRadius: 4,
}
// label: {
// normal: {
// color: '#fff',
// show: true,
// position: ["-80px", 0],
// textStyle: {
// fontSize: 16
// },
// formatter: function(a, b) {
// return a.name
// }
// }
// }
}]
}
return option
}
export function barline1() {
return {
backgroundColor: 'transparent',
tooltip: {},
title: {
text: '订单完成总数',
left: '50%',
top: '5%',
textAlign: 'center',
textStyle: {
// color: '#fff',
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
}
},
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: '15%',
containLabel: true
},
legend: {
show: false,
itemGap: 50,
data: ['注册总量', '最新注册量'],
textStyle: {
color: '#f9f9f9',
borderColor: '#fff'
}
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisLabel: {
interval: 0,
formatter: '{value}',
fontSize: 14,
margin: 20,
textStyle: {
color: colorX
}
},
axisLine: {
lineStyle: {
color: '#032c58'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: false
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [
{
max: 800,
boundaryGap: false,
splitNumber: 4,
type: 'value',
axisLabel: {
textStyle: {
fontSize: 14,
color: colorY
}
},
name: '单',
nameTextStyle: {
color: colorY,
fontSize: 14,
lineHeight: 20
},
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
}
],
series: [
{
name: '注册总量',
type: 'line',
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 6,
lineStyle: {
normal: {
color: '#28ffb3' // 线条颜色
},
borderColor: '#f0f'
},
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#28ffb3'
}
},
tooltip: {
show: false
},
areaStyle: { // 区域填充样式
normal: {
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0,154,120,1)'
},
{
offset: 1,
color: 'rgba(0,0,0, 0)'
}
], false),
shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
// data: [393, 438, 485, 631, 689, 824, 987]
data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
}
// {
// name: '最新注册量',
// type: 'bar',
// barWidth: 20,
// tooltip: {
// show: false
// },
// label: {
// show: true,
// position: 'top',
// textStyle: {
// color: '#fff',
// }
// },
// itemStyle: {
// normal: {
// // barBorderRadius: 5,
// // color: new echarts.graphic.LinearGradient(
// // 0, 0, 0, 1,
// // [{
// // offset: 0,
// // color: '#14c8d4'
// // },
// // {
// // offset: 1,
// // color: '#43eec6'
// // }
// // ]
// // )
// color: function (params) {
// var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1'];
// return colorList[params.dataIndex];
// }
// }
// },
// data: [200, 382, 102, 267, 186, 315, 316]
// }
]
}
}
// 综合看板
export function zhkb01() {
// const zhkb01name = ['计划完成进度(自产)', '计划完成进度(外购)'] // 名称
const zhkb01name = ['', ''] // 名称
const zhkb01Value = [Math.ceil(Math.random() * 10 + 90), Math.ceil(Math.random() * 10 + 90)] // 值
const zhkb01Max = []
const max = Math.ceil(Math.max(...zhkb01Value.map(r => r)) * 1.1)
for (let i = 0; i < zhkb01Value.length; i++) {
zhkb01Max.push(max * 4)
// zhkb01Max.push(100)
}
const option = {
backgroundColor: 'transparent',
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: '5%',
containLabel: true
},
// tooltip: {
// formatter: (params) => {
// if (params.name !== '') {
// return params.name + ' : ' + zhkb01Value[params.dataIndex]
// }
// },
// textStyle: {
// align: 'left'
// }
// },
xAxis: [
{
type: 'value',
axisLabel: {
show: false,
color: '#fff',
formatter: function(val) {
return val + ''
},
textStyle: {
fontSize: '13'
}
},
min: 0,
max: max, // 计算最大值
interval: max / 5, // 平均分为5份
splitNumber: 5,
splitLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff',
width: 1,
opacity: 0.3
}
},
axisTick: {
show: false
}
},
{
type: 'value',
axisLabel: {
show: false
},
min: 0,
max: max, // 计算最大值
interval: max / 10, // 平均分为5份
splitNumber: 10,
splitLine: {
show: false,
lineStyle: {
type: 'dashed',
color: '#D8D8D8'
}
},
axisLine: {
show: false,
lineStyle: {
color: '#fff'
}
},
axisTick: {
show: false
}
}
],
yAxis: [
{
// show: true,//暂时不显示
show: false,
inverse: false,
data: zhkb01name,
axisLabel: {
padding: [30, 0, 0, -135],
// inside: true
textStyle: {
fontSize: 16,
fontFamily: 'PingFang SC',
// fontWeight: 400,
color: '#3dffef',
align: 'left'
}
// formatter: '{value}\n{a|占位}',
// rich: {
// a: {
// // color: 'transparent',
// color: 'red',
// lineHeight: 30,
// fontFamily: 'digital',
// fontSize: 20,
// // shadowColor: 'rgba(0, 0, 0, 1)',
// shadowColor: 'red',
// shadowBlur: 10
// }
// }
},
// scale: true, // 自适应
// offset: 50,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
{
// 左侧柱状图的Y轴
gridIndex: 0, // y轴所在的 grid 的索引
splitLine: 'none',
axisTick: 'none',
axisLine: 'none',
data: zhkb01Value,
// inverse: true,//是否是反向坐标轴。
axisLabel: {
show: true,
verticalAlign: 'center',
align: 'left',
padding: [0, 0, 0, 0],
textStyle: {
color: '#fff',
fontSize: '20'
},
formatter: function(value) {
return '{x| ' + value + '} {y|' + '%}'
},
rich: {
y: {
color: '#3dffef',
fontFamily: 'Orbitron',
fontSize: 16
},
x: {
color: '#3dffef',
fontFamily: 'Orbitron',
fontSize: 16
}
}
}
}
],
series: [
{
name: '值',
type: 'bar',
barGap: '-130%',
// zlevel: 1,
xAxisIndex: 0,
label: {
show: false,
position: 'right',
textStyle: {
color: '#fff',
fontSize: 20
}
},
itemStyle: {
normal: {
barBorderRadius: 4,
color: {
colorStops: [
{
offset: 0,
color: '#46B7ED' // 0% 处的颜色
},
{
offset: 1,
color: '#48EDD3' // 100% 处的颜色
}
]
}
}
},
barWidth: 12,
data: zhkb01Value,
z: 0
},
{
// 分隔
type: 'pictorialBar',
symbolRotate: '-20',
itemStyle: {
normal: {
color: 'rgba(1, 12, 38, 0.4)'
}
},
symbolRepeat: 'fixed',
symbolMargin: 10,
symbol: 'rect',
symbolClip: true,
symbolSize: [5, 28],
symbolPosition: 'start',
symbolOffset: [0, -1],
data: zhkb01Value,
z: 66,
animationEasing: 'elasticOut'
},
{
name: '背景',
type: 'bar',
barWidth: 14,
barGap: '-110%',
data: zhkb01Max,
itemStyle: {
normal: {
color: 'rgba(5,59,113,.7)',
barBorderRadius: 6,
borderColor: 'rgba(0, 255, 236, 1)'
}
},
z: -1
}
]
}
return option
}
export function zhkb02() {
}
export function zhkb03(title) {
const labelData = []
const labelData1 = []
for (let i = 0; i < 80; ++i) {
labelData.push({
value: 1,
name: i,
itemStyle: {
normal: {
color: 'rgba(0,209,228,0)'
}
}
})
}
for (let i = 0; i < labelData.length; ++i) {
if (labelData[i].name < 15) {
labelData[i].itemStyle = {
normal: {
color: new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: '#6dfbff'
},
{
offset: 1,
color: '#02aeff'
}
]
)
}
}
}
}
for (let i = 0; i < 80; ++i) {
labelData1.push({
value: 1,
name: i,
itemStyle: {
normal: {
color: 'rgba(0,209,228,0)'
}
}
})
}
for (let i = 0; i < labelData1.length; ++i) {
if (labelData1[i].name < 80) {
labelData1[i].itemStyle = {
normal: {
color: '#464451'
}
}
}
}
function Pie() {
const dataArr = []
for (var i = 0; i < 100; i++) {
if (i % 10 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 30,
itemStyle: {
normal: {
color: 'rgba(0,255,255,1)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
})
}
}
return dataArr
}
function Pie1() {
const dataArr = []
for (var i = 0; i < 100; i++) {
if (i % 5 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,255,255,1)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
})
}
}
return dataArr
}
function Pie2() {
const dataArr = []
for (var i = 0; i < 100; i++) {
if (i % 5 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: 'rgba(0,255,255,.3)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
})
} else {
dataArr.push({
name: (i + 1).toString(),
value: 100,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: 'rgba(0,0,0,0)'
}
}
})
}
}
return dataArr
}
const option = {
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '0%',
containLabel: true
},
backgroundColor: 'transparent',
title: [
{
text: title,
x: '46%',
y: '38%',
textAlign: 'center',
textStyle: {
fontSize: 12,
fontWeight: 'normal',
color: '#09d8f2'
}
},
{
text: '99%',
x: '49%',
y: '53%',
textAlign: 'center',
textStyle: {
fontSize: 18,
fontWeight: 800,
color: '#09d8f2'
}
}],
polar: {
radius: ['90%', '85%'],
center: ['50%', '50%']
},
angleAxis: {
max: 100,
show: false,
startAngle: 0
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
series: [
// 最里圈
{
type: 'pie',
radius: ['91%', '89%'],
center: ['50%', '50%'],
data: [{
hoverOffset: 1,
value: 100,
name: '',
itemStyle: {
color: '#2f748b'
},
label: {
show: false
},
labelLine: {
normal: {
smooth: true,
lineStyle: {
width: 0
}
}
},
hoverAnimation: false
}]
},
// 里第二圈
{
name: '',
type: 'bar',
roundCap: true, // 圆角
barWidth: 60,
showBackground: true,
backgroundStyle: {
color: '#3d4767'
},
data: [75],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: '#0ff'
}, {
offset: 1,
color: '#02aeff'
}])
}
}
},
// 齿轮
{
name: '大环',
type: 'gauge',
splitNumber: 100,
radius: '124%',
center: ['50%', '50%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
color: [[0.3, '#26a7d4'], [1, '#23395a']]
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 8,
lineStyle: {
color: 'auto',
width: 2.5
}
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
// 外圈装饰
{
type: 'pie',
zlevel: 0,
silent: true,
radius: ['110%', '108.5%'],
center: ['50%', '50%'],
z: 1,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: Pie()
},
// {
// type: 'pie',
// zlevel: 0,
// silent: true,
// startAngle: -150,
// radius: ['58.5%', '57%'],
// center: ['50%', '50%'],
// z: 1,
// label: {
// normal: {
// show: false
// }
// },
// labelLine: {
// normal: {
// show: false
// }
// },
// data: Pie3()
// },
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -140,
radius: ['100%', '98.5%'],
center: ['50%', '50%'],
z: 1,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: Pie()
},
{
type: 'pie',
zlevel: 0,
silent: true,
radius: ['98%', '96.5%'],
center: ['50%', '50%'],
z: 1,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: Pie1()
},
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -140,
radius: ['98%', '96.5%'],
center: ['50%', '50%'],
z: 1,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: Pie2()
},
{
type: 'pie',
zlevel: 0,
silent: true,
startAngle: -147.5,
radius: ['98%', '96.5%'],
center: ['50%', '50%'],
z: 1,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: Pie2()
}
]
}
return option
}
export function zhkb04() {
const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3']
// const data = [330, 404, 780, 509, 150]
const data = [Math.ceil(Math.random() * 100 + 500), Math.ceil(Math.random() * 100 + 600), Math.ceil(Math.random() * 100 + 700), Math.ceil(Math.random() * 400 + 500), Math.ceil(Math.random() * 100 + 200)]
const option = {
backgroundColor: 'transparent',
grid: {
left: '10%',
right: '4%',
bottom: '0%',
top: '5%',
containLabel: true
},
xAxis: [{
show: false
}],
yAxis: [
{
axisTick: 'none',
axisLine: 'none',
offset: '27',
axisLabel: {
textStyle: {
color: function(value, index) {
let temp = ''
myColor.forEach((it, ind) => {
if (index === ind) {
temp = it
}
})
return temp
},
fontSize: 16
}
},
data: ['第四季度订单数', '第三季度订单数', '第二季度订单数', '第一季度订单数', '在制订单数量']
},
{
axisTick: 'none',
axisLine: 'none',
axisLabel: {
textStyle: {
color: function(value, index) {
let temp = ''
myColor.forEach((it, ind) => {
if (index === ind) {
temp = it
}
})
return temp
},
fontSize: 16
}
},
data: data
},
{
show: false,
name: '单位：件',
nameGap: '50',
nameTextStyle: {
color: '#ffffff',
fontSize: '16'
},
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0)'
}
},
data: []
}
],
series: [
{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: data.map(r => r / 10),
label: {
normal: {
show: false,
position: 'right',
formatter: function(param) {
return param.value + '%'
},
textStyle: {
color: '#ffffff',
fontSize: '16'
}
}
},
barWidth: 12,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length
return myColor[params.dataIndex % num]
}
}
},
z: 2
},
{
name: '白框',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
data: [99.5, 99.5, 99.5, 99.5, 99.5],
barWidth: 20,
itemStyle: {
normal: {
color: '#0e2147',
barBorderRadius: 5
}
},
z: 1
},
{
name: '外框',
type: 'bar',
yAxisIndex: 2,
barGap: '-100%',
data: [100, 100, 100, 100, 100],
barWidth: 24,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length
return myColor[params.dataIndex % num]
},
barBorderRadius: 5
}
},
z: 0
},
{
name: '外圆',
type: 'scatter',
hoverAnimation: false,
data: [0, 0, 0, 0, 0],
yAxisIndex: 2,
symbolSize: 30,
itemStyle: {
normal: {
color: function(params) {
var num = myColor.length
return myColor[params.dataIndex % num]
},
opacity: 1
}
},
z: 2
}
]
}
return option
}
export function zhkb05() {
// 数据
// var XName = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
var XName = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
var data1 = [
// [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
[Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300)]
// [123, 154, 234, 321, 120, 390, 634],
// [63, 194, 234, 321, 278, 110, 534],
// [53, 254, 234, 321, 118, 240, 434],
// [23, 354, 334, 221, 178, 190, 234]
]
var Line = ['云篆山水路线', '昕博朗学校路线', '新华小学路线', '云锦五路路线']
var img = [
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
'image://data:image/png;base64,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',
'image://data:image/png;base64,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',
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAAACXBIWXMAAAsSAAALEgHS3X78AAAHaUlEQVR42u3cv29jWRUH8O+5P96zX5x4Mk4yjCW0S5QqZil2aIEUUG5BEQr4B2joKBclrhAF1HR0gNYVK6BapDSIyhSLnAKNxBSrLJOJd+L413vv3nsOhfNjMhmx4sfaSXSP5ESOrt/1++jcn+8qJCKI8d+FigQRL+JFvIgXI+JFvIgX8WJEvIgX8SJexIsR8SJexIt4MSJexIt4ES9GxPvfw9zGL0Ugev1vgtv3gJluw0NvApH8R+VvB+ZC8a6jCdpo096/Kd8GsIc9mfEtHnGBzXYG18b+OVgb2+gRABzgBQE7r5Q9wA7WZfuScB9tAIJ9AYiwIECz2GzbpyuwFm1ilQBgA63X+rwdAEeyCeAAkB30ziH3gXPARWTh3EfbWbaBgH0CerSOFnWxqjYAVUeqnqGpB58M9AquXoNPBvoZmrqOVG0AqotVtY4WAT0C9qkNkNz/Pu9iFN0/v/EWHQIqQZ9UqCeauaLJcWqWilM/WQYANhg9RCaFH6eMRNjYiUdfSjRkG2CgJ0BLZhkIzLMJzxHvzXAZnqn+p4mqVauZ1srQkvWToQqaisumGySVbJm1jJ0p82I09Z4bj0ue4G1eJOBc8drnfdw6WrQBqAxQyrtseuqcXSOVn5XarCilR6QUJTSFoyqssJQSasL+jLmykgR3Ilx9YC0bO5kAfAzwC/TkEC3Zw77MC28uA8bFIDEbVXfRxUeUICXlV7KCnE7XSraoatJsFKrKaa8ZOYEsseQiMJLCBKvHnECRWpuGIkCnHllizsbLKGgHuwIcvlLfFw84lwFDzn920CPgkKpoUgVGjYwt7bB05VCbwdhbu1QznBeJKJeI0kkKvAsy74J4k/MisUs1Mxh7Ww61scPSjYwtKzCqiiYBhzS7vkDuV59Hl6NrF6uqjlRNnqcme1TTFcC4cWmD8lYTrTNQBeSbAH4kKnzHQgsLmKGCFngv7DUbZ5cSlwN+8nwUskeFH6DgJ3jJV33fPcm8q6lui6qHTTJoUOVhsmRwqvJRoQ15ratWS8kjVvISwDcAfCxOJYWjhAW/gPAPAnNLWb1myOt8VGiDUzW7ToOqh006uDE/vON4Nxb524DBgKC9n5yR0kSqJK91EbSqsNYgI+zfh1bvV6W1rRMygHwM4LtKcx8+PC7Ja02kJmekoL03GBC2P39z4Q42W6LzqTEBUE+f9vVgqaHrad94W7MV5S1rlQjkHQJ9PQT+ncVXvpzxO78GqAbwP4fqL99nnLxMrSmdSEkipQpc5myccSM3KBq+Pu6Hra1GAMC4XP9+sTc3t2bb6cyWYdgCmo8BPGxgGQCRJYInQI4F8kMiTRV5+70ZHACoL2Wy/R6RphJMhEAET0SWljG7TvPx7LrX6rlPy7Pd3dZlFpSuXAL6GAKYYHKRn6ei6NvGBgHx8HryhjNtQkosH4nQV3H+uVmhPgIH/aZ67gneVTJsoSGDs0GJz4Daci5VsSIwIoUXC2ER4dz0PhRM/yBwf2WMfztO/vyhCKoE/BLMIjBSFSu15VzwGXDSP8EWGvKm+u70JJku53nAAYANAA8bSTk+sYYHSoL2LCKsErPlmQpA/Vzk5PfDyp9+AhcIVguXgWHtsYL6jVHsnMyQ1SCVwFbW1p0/BHCMq42sV+u9s5n36kx/tpV0JB51ebDG7OvCQYSdlEFAnwLCAD4goq+ReEeE71HgP2ptfkYsmyLhcYAOTsoQRNjXhR+sMXvUZRtHsoOevKneO9/ntc9/d7uAR19yV2YhSFJZtmE1q3rPeEGgfzC5D1JSPybhUin6FZH/lgZ+KmAP4NSx+NWs6ivLNoQgSe7KzKMv3e71eu7ZCmO2o3IAqA1AVYJPEymS3Cy5CgamGGljlNeOEh2I1wzUIw/+ewojUzixooOVMng2Ia0Fn6PuK35sS0rLXJviGOAdgOe5szKXzKNre8I9mXaPZFObAsZPyhfHnKHubc24JNNOc+GY/fOE8besogrNXIJDqblwSaadrRmXoe7LF8cM4yeb2hTT7vUmS/cr827u512scSswSrypWUUhPyt5okjVVyqkUF4aMBIZnOWSsXBlJVFeBNB+msPzzTXt/Pbz5tbn0St9X6cDDNGUAQrOn3p2lOYlTzFxpdcr1k0xclOYV14jp1esm7jSlzyF10uT/OkMboimdDpXfR3dvz7vZvZ1Oj3a3QW6WFVVNClBnwwaRGGYgNN0YMsJAFhPlUysgioK0cvlxRb8FEfyBC+507mYGM9/G37OD4AubmxfDndbArTkCV7yNsADFDxBj9/Sy7mzw7MMhc9QeGvykbPDs7f0cj5BjwcoeBu4bKqHC4JbQOa9noHnWYge7WL2vHbnfJrbxdFlmSdoymySPXt+2wGwe62Pmz/cAvHedMRi/xKrg5uL+xnWZVm5voJZzE0s/KzKTcTZu3a7TdibjTB7e3vy+nBwG86r0G367xafd+DnthzwuZV4dy3i4caIF/EiXsSLEfEiXsSLeDEiXsSLeBEv4sWIeBEv4kW8GBEv4kW8iBcj4v0f4l+bPQ5YnMn04QAAAABJRU5ErkJggg=='
]
// var color = ['#00f8ff', '#00f15a', '#0696f9', '#dcf776']
var color = ['#00f8ff']
// 数据处理
var datas = []
Line.map((item, index) => {
datas.push(
{
symbolSize: 150,
symbol: img[index],
name: item,
type: 'line',
yAxisIndex: 1,
data: data1[index],
itemStyle: {
normal: {
borderWidth: 5,
color: color[index]
}
}
}
)
})
const option = {
backgroundColor: 'transparent',
grid: {
left: '5%',
top: '20%',
bottom: '0%',
right: '5%',
containLabel: true
},
title: {
text: '今年每月订单数量',
x: '50%',
y: '0%',
textAlign: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
color: '#00FFFF'
}
},
legend: {
show: false,
type: 'scroll',
data: Line,
itemWidth: 18,
itemHeight: 12,
textStyle: {
color: '#00ffff',
fontSize: 14
}
},
yAxis: [
{
type: 'value',
position: 'right',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
{
// show: false,
type: 'value',
position: 'left',
// name: '今年每月订单数量',
nameTextStyle: {
color: '#00FFFF',
fontSize: 16
},
splitNumber: 3,
// nameLocation: 'center',
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(135,140,147,0.8)'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}',
color: '#00FFFF',
fontSize: 14
}
}
],
xAxis: [
{
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#6A989E'
}
},
axisLabel: {
inside: false,
textStyle: {
color: colorX, // x轴颜色
fontWeight: 'normal',
fontSize: 16,
lineHeight: 22
}
},
data: XName
},
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
// -----
data: ['1月', '2月', '3月', '4月', '5月', '6月']
}
],
series: datas
}
// 当点击legend选项时折线上的小图片会消失，为避免这种情况，可以采取以下初始化方法 使用svg
// var myCharts = echarts.init(document.getElementById('AnalysisChartLine'), null, {renderer: 'svg'});
// myCharts.clear();
// myCharts.setOption(option)
return option
}
export function zhkb06(title) {
const option = {
backgroundColor: 'transparent',
title: [
{
text: title,
x: 'center',
top: '55%',
textStyle: {
color: '#FFFFFF',
fontSize: 14,
fontWeight: 100
}
},
{
text: '95%',
x: 'center',
top: '38%',
textStyle: {
fontSize: 14,
color: '#FFFFFF',
fontFamily: 'DINAlternate-Bold, DINAlternate',
foontWeight: 100
}
}
],
grid: {
left: '0%',
top: '0%',
bottom: '0%',
right: '0%',
containLabel: true
},
angleAxis: {
max: 100,
clockwise: false, // 逆时针
// 隐藏刻度线
show: false,
boundaryGap: ['40%', '40%'],
startAngle: 90
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
}
},
polar: [
{
center: ['50%', '50%'], // 中心点位置
radius: '165%' // 图形大小
}
],
series: [
{
name: '齿轮',
type: 'gauge',
splitNumber: 60,
radius: '132%',
center: ['50%', '50%'],
startAngle: 90,
endAngle: -269.9999,
axisLine: {
show: false,
lineStyle: {
color: [[0.3, '#26a7d4'], [1, '#23395a']]
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 8,
lineStyle: {
color: 'auto',
width: 2.5
}
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
{
type: 'bar',
z: 10,
data: [75],
showBackground: false,
backgroundStyle: {
color: 'blue',
borderWidth: 4,
width: 4
},
coordinateSystem: 'polar',
roundCap: true,
barWidth: 6, // 大的占比环
itemStyle: {
normal: {
opacity: 1,
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: '#00FFFF'
},
{
offset: 1,
color: '#09d8f2'
}
])
}
}
},
{
type: 'pie',
name: '内层细圆环',
radius: ['82%', '83%'],
startAngle: 110,
hoverAnimation: false,
clockWise: true,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{
offset: 0,
color: 'rgba(151,179,166,0.74)'
},
{
offset: 1,
color: 'rgba(151,179,166,0.74)'
}
]),
shadowBlur: 20,
shadowColor: '#66666a'
}
},
tooltip: {
show: false
},
label: {
show: false
},
data: [100]
}
]
}
return option
}
export function zhkb07(title, value) {
const dataArr = [
{
value: value,
name: title
}
]
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#1f79b6' // 0% 处的颜色
},
{
offset: 1,
color: '#0dd2db' // 100% 处的颜色
}
])
const colorSet = [
[value / 100, color],
[1, '#15337C']
]
const rich = {
white: {
fontSize: 14,
color: '#fff',
fontWeight: '500'
},
bule: {
fontSize: 14,
fontFamily: 'DINBold',
color: '#fff',
fontWeight: 100
},
radius: {
width: 350,
height: 80,
// lineHeight:80,
borderWidth: 1,
borderColor: '#0092F2',
fontSize: 14,
color: '#fff',
backgroundColor: '#1B215B',
borderRadius: 20,
textAlign: 'center'
},
size: {
height: 400,
padding: [100, 0, 0, 0]
}
}
const option = {
backgroundColor: 'transparent',
tooltip: {
formatter: '{a}
{b} : {c}%'
},
series: [
{
type: 'gauge',
radius: '90%',
startAngle: '225',
endAngle: '-45',
pointer: {
show: false
},
detail: {
formatter: function(value) {
var num = Math.round(value)
return '{bule|' + num + '}{white|%}'
},
rich: rich,
offsetCenter: ['0%', '0%']
},
data: dataArr,
title: {
show: true,
color: '#fff',
offsetCenter: ['0', '75%'],
fontSize: 14
},
axisLine: {
show: true,
lineStyle: {
color: colorSet,
width: 12,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: 1
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
length: 10,
lineStyle: {
color: '#00377a',
width: 2,
type: 'solid'
}
},
axisLabel: {
show: false
}
}
]
}
return option
}
export function zhkb08() {
const data = [
{
name: '钢材改制车间',
value: Math.floor(Math.random() * 10 + 90)
},
{
name: '冷墩车间',
value: Math.floor(Math.random() * 10 + 90)
},
{
name: '热墩车间',
value: Math.floor(Math.random() * 10 + 90)
},
{
name: '热处理车间',
value: Math.floor(Math.random() * 10 + 90)
},
{
name: '达克罗车间',
value: Math.floor(Math.random() * 10 + 90)
},
{
name: '镀锌车间',
value: Math.floor(Math.random() * 10 + 90)
}
]
const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#ff00ff']
const getArrByKey = (data, k) => {
const key = k || 'value'
const res = []
if (data) {
data.forEach(function(t) {
res.push(t[key])
})
}
return res
}
const getSymbolData = (data) => {
const arr = []
for (var i = 0; i < data.length; i++) {
arr.push({
value: data[i].value,
symbolPosition: 'end'
})
}
return arr
}
// console.log(getSymbolData(data));
const option = {
backgroundColor: 'transparent',
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '15%',
containLabel: true
},
title: {
text: '九月能耗用量',
x: '44%',
y: '0%',
textStyle: {
color: '#09d8f2',
fontSize: 16
}
// subtextStyle: {
// color: '#90979c',
// fontSize: '16'
// }
},
xAxis: {
show: false
},
yAxis: [
{
triggerEvent: true,
show: true,
inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
interval: 0,
// color: colorY,
align: 'left',
margin: 30,
textStyle: {
color: function(value, index) {
let temp = ''
myColor.forEach((it, ind) => {
if (index === ind) {
temp = it
}
})
return temp
},
fontSize: 16,
align: 'right'
// width: 36
}
// formatter: function(value, index) {
// return '{title|' + value + '}'
// },
// rich: {
// title: {
// width: 36,
// align: 'right',
// fontSize: 16
// }
// }
}
},
{
triggerEvent: true,
show: true,
inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
shadowOffsetX: '-20px',
// color: colorX,
color: function(value, index) {
let temp = ''
myColor.forEach((it, ind) => {
if (index === ind) {
temp = it
}
})
return temp
},
align: 'left',
verticalAlign: 'center',
lineHeight: 40,
fontSize: 16,
margin: 20,
formatter: function(value, index) {
// return data[index].value + '%'
return data[index].value + '吨'
}
}
}],
series: [
{
name: 'XXX',
type: 'pictorialBar',
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
symbolSize: [50, 50],
symbolOffset: [20, 0],
z: 12,
itemStyle: {
normal: {
color: '#fff'
}
},
data: getSymbolData(data)
},
{
name: '条',
type: 'bar',
showBackground: true,
yAxisIndex: 0,
data: data,
barWidth: 10,
// align: left,
itemStyle: {
normal: {
color: function(params) {
return myColor[params.dataIndex]
},
barBorderRadius: 10
}
}
// label: {
// normal: {
// color: '#fff',
// show: true,
// position: ["-80px", 0],
// textStyle: {
// fontSize: 16
// },
// formatter: function(a, b) {
// return a.name
// }
// }
// }
}]
}
return option
}
// 暂时弃用
export function zhkb092222() {
const data = [220, 182, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330]
const sideData = data.map(item => item + 4.5)
const option = {
backgroundColor: 'transparent',
// tooltip: {
// trigger: 'axis',
// formatter: '{b} : {c}',
// axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
// }
// },
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '15%',
containLabel: true
},
title: {
text: '近一年每月能耗使用',
x: '40%',
y: '0%',
textStyle: {
color: '#09d8f2',
fontSize: 16
}
// subtextStyle: {
// color: '#90979c',
// fontSize: '16'
// }
},
xAxis: {
data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
// 坐标轴
axisLine: {
lineStyle: {
color: '#3eb2e8'
}
},
// 坐标值标注
axisLabel: {
show: true,
textStyle: {
color: colorX,
fontSize: 14
}
}
},
yAxis: {
// 坐标轴
axisLine: {
show: false
},
// 坐标值标注
axisLabel: {
show: true,
textStyle: {
color: '#09d8f2',
fontSize: 14
}
},
// 分格线
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(135,140,147,0.8)'
}
},
splitNumber: 3
},
series: [
{
name: 'a',
tooltip: {
show: false
},
type: 'bar',
barWidth: 18,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#0B4EC3' // 0% 处的颜色
}, {
offset: 0.6,
color: '#138CEB' // 60% 处的颜色
}, {
offset: 1,
color: '#17AAFE' // 100% 处的颜色
}], false)
}
},
data: data,
barGap: 0
},
{
type: 'bar',
barWidth: 8,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#09337C' // 0% 处的颜色
}, {
offset: 0.6,
color: '#0761C0' // 60% 处的颜色
}, {
offset: 1,
color: '#0575DE' // 100% 处的颜色
}], false)
}
},
barGap: 0,
data: sideData
},
{
name: 'b',
tooltip: {
show: false
},
type: 'pictorialBar',
itemStyle: {
borderWidth: 1,
borderColor: '#0571D5',
color: '#1779E0'
},
symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
symbolSize: ['30', '6'],
symbolOffset: ['0', '-4'],
// symbolRotate: -5,
symbolPosition: 'end',
data: data,
z: 3
}
]
}
return option
}
export function zhkb09() {
// const dataY = [60, 70, 80, 90, 60, 70, 80, 90, 80, 90, 60, 70, 80, 90]
const dataY = [(80 + Math.random() * 10), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 + Math.random() * 10), (90 - Math.random() * 30), (80 - Math.random() * 30), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 - Math.random() * 10), (90 - Math.random() * 30)]
const option = {
backgroundColor: 'transparent',
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '15%',
containLabel: true
},
title: {
text: '近一年每月能耗使用',
x: '40%',
y: '0%',
textStyle: {
color: '#09d8f2',
fontSize: 16
}
},
color: ['#3cefff'],
tooltip: {},
xAxis: [
{
type: 'category',
data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
axisTick: {
alignWithLabel: true
},
nameTextStyle: {
color: '#82b0ec'
},
axisLine: {
lineStyle: {
color: '#82b0ec'
}
},
axisLabel: {
margin: 20,
textStyle: {
// color: '#82b0ec'
color: colorX,
fontSize: 14
}
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
textStyle: {
color: '#09d8f2',
fontSize: 14
}
// formatter: '{value}%'
},
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(135,140,147,0.8)'
}
},
axisLine: {
show: false
}
}
],
series: [
{
name: '',
type: 'pictorialBar',
symbolSize: [20, 10],
symbolOffset: [0, -5],
symbolPosition: 'end',
z: 12,
label: {
normal: {
show: false,
position: 'top',
formatter: '{c}%'
}
},
data: dataY
},
{
name: '',
type: 'pictorialBar',
symbolSize: [20, 10],
symbolOffset: [0, 5],
z: 12,
data: dataY
},
{
type: 'bar',
itemStyle: {
normal: {
opacity: 0.7
}
},
barWidth: '20',
data: dataY
// markLine: {
// silent: true,
// label: {
// position: 'middle',
// formatter: '{b}',
// color: 'red'
// },
// data: [
// {
// name: '目标值',
// yAxis: 80,
// lineStyle: {
// color: 'red'
// },
// itemStyle: {
// color: 'red'
// },
// label: {
// position: 'end',
// formatter: '{b}\n {c}%'
// }
// }
// ]
// }
},
{
type: 'effectScatter',
silent: true,
tooltip: {
show: false
},
zlevel: 3,
symbolSize: 10,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke',
color: '#3cefff',
scale: 5
},
itemStyle: {
color: '#3cefff'
},
hoverAnimation: true,
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}
]
}
return option
}
export function zhkb10() {
const _legendColor = '#8FD8FF'
const _fontSize = 16
const _fontColor = '#8FD8FF'
// const data1 = [70, 90, 100, 70, 90, 100]
// const data2 = [80, 60, 80, 50, 90, 60]
const data1 = [70 + Math.random() * 20, 90 - Math.random() * 20, 100 - Math.random() * 20, 70 + Math.random() * 20, 90 - Math.random() * 20, 80 - Math.random() * 20]
const data2 = [80 + Math.random() * 20, 60 + Math.random() * 20, 80 - Math.random() * 20, 50 + Math.random() * 20, 90 - Math.random() * 20, 60 + Math.random() * 20]
const option = {
backgroundColor: 'transparent',
legend: {
x: 'right',
y: '2%',
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: 16,
color: 'rgba(255,255,255,.7)'
}
},
grid: {
left: '2%',
top: '7%',
right: '2%',
bottom: '0%',
containLabel: true
},
yAxis: {
// max: Math.ceil(Math.max(...data1) * 1.2),
max: 100,
type: 'value',
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: '#4E84AC'
}
},
axisTick: {
show: false
},
axisLabel: {
formatter: '{value}',
color: '#00FFFF',
fontSize: 14
},
splitLine: {
show: false
}
},
xAxis: {
type: 'category',
nameTextStyle: {
fontSize: 16,
color: '#7dd6ea'
},
axisLabel: {
show: true,
interval: 0,
// margin: 20,
textStyle: {
color: colorX,
fontSize: 16
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#4E84AC'
// width: 3
}
},
data: ['钢材改制', '冷墩', '热墩', '热处理', '达克罗', '镀锌']
},
series: [
{
name: '人员分析1',
type: 'bar',
barWidth: 15,
barGap: '30%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0,234,255, 1)'
},
{
offset: 1,
color: 'rgba(0,234,255, .1)'
}
])
}
},
// label: {
// show: true,
// position: 'top',
// textStyle: {
// fontSize: 36,
// color: '#00EAFF'
// },
// formatter: function(params) {
// return params.value + '%'
// }
// },
data: data1,
z: 10,
zlevel: 0
},
{
// 分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#0F375F'
}
},
symbolRepeat: 'fixed',
symbolMargin: 15,
symbol: 'rect',
symbolClip: true,
symbolSize: [15, 2],
symbolPosition: 'start',
symbolOffset: [-10, 0],
data: data1,
width: 2,
z: 0,
zlevel: 1
},
{
name: '人员分析2',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(252,160,0, 1)'
},
{
offset: 1,
color: 'rgba(252,160,0, .1)'
}
])
}
},
// label: {
// show: true,
// position: 'top',
// textStyle: {
// fontSize: 16,
// color: '#FFA200'
// },
// formatter: function(params) {
// return params.value + '%'
// }
// },
data: data2,
z: 10,
zlevel: 0
},
{
// 分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: '#0F375F'
}
},
symbolRepeat: 'fixed',
symbolMargin: 15,
symbol: 'rect',
symbolClip: true,
symbolSize: [15, 2],
symbolPosition: 'start',
symbolOffset: [10, 0],
data: data2,
width: 2,
z: 0,
zlevel: 1
}
]
}
return option
}
export function zhkb11() {
const option = {
backgroundColor: 'transparent',
// title: {
// text: '时段-进出港流量',
// left: '5%',
// top: '5%',
// textStyle: {
// color: '#fff',
// fontSize: '18px'
// }
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: [
{
icon: 'react',
right: '0%',
top: '0%',
textStyle: {
color: '#fff',
fontSize: 14
},
itemGap: 30,
itemWidth: 30,
itemHeight: 4,
data: ['设备利用率', '设备开机率']
}
],
grid: {
top: '10%',
right: '5%',
left: '1%',
bottom: '0%',
containLabel: true
},
yAxis: [
{
type: 'category',
data: ['冷镦车间', '热墩车间', '达克罗车间', '磷化车间', '注塑车间'],
axisLine: {
lineStyle: {
color: '#4E84AC'
// width: 2
}
},
axisTick: {
show: false
},
axisLabel: {
// margin: 10,
color: '#09d8f2',
textStyle: {
fontSize: 16
}
}
}
],
xAxis: [
{
axisLabel: {
formatter: '{value}',
color: '#6895CA',
textStyle: {
fontSize: 16,
color: colorX
}
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#4E84AC'
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
type: 'dashed',
// 使用深浅的间隔色
color: '#184D9A'
}
}
}
],
series: [
{
name: '设备利用率',
type: 'bar',
barGap: '70%',
data: [Math.ceil(30 + Math.random() * 20), Math.ceil(75 - Math.random() * 20), Math.ceil(77 - Math.random() * 20), Math.ceil(39 + Math.random() * 20), Math.ceil(85 - Math.random() * 20)],
barWidth: 12,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#00FFFF' // 0% 处的颜色
},
{
offset: 1,
color: '#00FF00' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
barBorderRadius: [30, 30, 30, 30],
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4
}
},
label: {
normal: {
show: true,
// lineHeight: 20,
// width: 80,
// height: 20,
verticalAlign: 'center',
borderRadius: 200,
position: 'right',
color: '#00FF00',
fontSize: 16
}
}
},
{
name: '设备开机率',
type: 'bar',
data: [Math.ceil(90 - Math.random() * 20), 45 + Math.ceil(Math.random() * 20), Math.ceil(27 + Math.random() * 20), Math.ceil(20 + Math.random() * 60), Math.ceil(85 - Math.random() * 20)],
barWidth: 12,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#00FFFF' // 0% 处的颜色
},
{
offset: 1,
color: '#FFFF00' // 100% 处的颜色
}
],
global: false // 缺省为 false
},
barBorderRadius: [30, 30, 30, 30],
shadowColor: 'rgba(0,160,221,1)',
shadowBlur: 4
}
},
label: {
normal: {
show: true,
// lineHeight: 20,
// width: 80,
// height: 20,
borderRadius: 200,
verticalAlign: 'center',
// position: ['-0', '-20'],
position: 'right',
color: '#FFFF00',
fontSize: 16
}
}
}
]
}
return option
}
export function zhkb12() {
}
export function echart01() {
return {
// title: {
// text: '2019年销售水量和主营业务收入对比',
// textStyle: {
// align: 'center',
// color: '#fff',
// fontSize: 20
// },
// top: '3%',
// left: '10%'
// },
backgroundColor: 'transparent',
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '30%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true
}
}
},
legend: {
data: ['成本', '效益'],
top: '15%',
textStyle: {
color: '#ffffff'
}
},
xAxis: [
{
type: 'category',
data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
axisTick: {
alignWithLabel: true
},
nameTextStyle: {
color: '#82b0ec'
},
axisLine: {
lineStyle: {
color: '#82b0ec'
}
},
axisLabel: {
// margin: 5,
textStyle: {
// color: '#82b0ec'
color: colorX,
fontSize: 10
}
}
}
],
yAxis: [
// {
// type: 'value',
// name: '亿元',
// nameTextStyle: {
// color: '#ebf8ac'
// },
// splitLine: {
// show: false
// },
// axisTick: {
// show: true
// },
// axisLine: {
// show: true,
// lineStyle: {
// color: '#FFFFFF'
// }
// },
// axisLabel: {
// show: true,
// textStyle: {
// color: '#ebf8ac'
// }
// }
//
// },
{
type: 'value',
gridIndex: 0,
min: 0,
max: 100,
splitNumber: 8,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
}
}
},
{
type: 'value',
name: '',
nameTextStyle: {
color: '#ebf8ac'
},
position: 'left',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: '{value} %', // 右侧Y轴文字显示
textStyle: {
color: colorX
}
}
}
],
series: [
{
name: '成本',
type: 'line',
yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: true, // 平滑曲线显示
showAllSymbol: true, // 显示所有图形。
// symbol: 'circle', // 标记的图形为实心圆
symbolSize: 5, // 标记的大小
itemStyle: {
// 折线拐点标志的样式
color: '#058cff'
},
lineStyle: {
color: '#058cff'
},
areaStyle: {
color: 'rgba(5,140,255, 0.2)'
},
// data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2.9, 2.8, 3, 5]
data: [100, 98, 99, 100, 100, 99, 98, 96, 97, 100, 100, 99]
},
{
name: '效益',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00FFE3'
},
{
offset: 1,
color: '#4693EC'
}
])
}
},
data: [28, 60, 30, 35, 27, 28, 33, 50, 29, 28, 36, 5]
// data: [100, 98, 99, 100, 100, 99, 98, 96, 97, 100, 100, 99]
}
]
}
}
export function echart02() {
var img = 'data:image/png;base64,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'
var trafficWay = [
{
name: '压印',
value: 20
}, {
name: '孔小',
value: 10
}, {
name: '变形',
value: 30
}, {
name: '划伤',
value: 20
}, {
name: '披锋',
value: 20
}]
var data = []
var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
for (var i = 0; i < trafficWay.length; i++) {
data.push({
value: trafficWay[i].value,
name: trafficWay[i].name,
itemStyle: {
normal: {
borderWidth: 5,
shadowBlur: 20,
borderColor: color[i],
shadowColor: color[i]
}
}
}, {
value: 2,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
})
}
var seriesOption = [{
name: '',
type: 'pie',
clockWise: false,
radius: [60, 66],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: 'outside',
color: '#ddd',
formatter: function(params) {
var percent = 0
var total = 0
for (var i = 0; i < trafficWay.length; i++) {
total += trafficWay[i].value
}
percent = ((params.value / total) * 100).toFixed(0)
if (params.name !== '') {
// return '缺陷名称：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%'
return params.name + ' ' + percent + '%'
} else {
return ''
}
}
},
labelLine: {
length: 10,
length2: 30,
show: true,
color: '#00ffff'
}
}
},
data: data
}]
const option = {
backgroundColor: 'transparent',
color: color,
title: {
text: '',
top: '48%',
textAlign: 'center',
left: '49%',
textStyle: {
color: '#fff',
fontSize: 22,
fontWeight: '400'
}
},
graphic: {
elements: [{
type: 'image',
z: 3,
style: {
image: img,
width: 88,
height: 88
},
left: 'center',
top: 'center',
position: [100, 100]
}]
},
tooltip: {
show: false
},
// legend: {
// icon: 'circle',
// orient: 'horizontal',
// // x: 'left',
// data: ['压印', '孔小', '变形', '披锋'],
// right: 340,
// bottom: 150,
// align: 'right',
// textStyle: {
// color: '#fff'
// },
// itemGap: 20
// },
toolbox: {
show: false
},
series: seriesOption
}
return option
}
export function echart03() {
return {
// title: {
// text: '2019年销售水量和主营业务收入对比',
// textStyle: {
// align: 'center',
// color: '#fff',
// fontSize: 20
// },
// top: '3%',
// left: '10%'
// },
backgroundColor: 'transparent',
grid: {
left: '5%',
right: '5%',
bottom: '5%',
top: '20%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true
}
}
},
xAxis: [
{
type: 'category',
data: ['压印', '孔小', '变形', '划伤', '披锋'],
axisTick: {
alignWithLabel: true
},
nameTextStyle: {
color: '#82b0ec'
},
axisLine: {
lineStyle: {
color: '#82b0ec'
}
},
axisLabel: {
// margin: 5,
textStyle: {
// color: '#82b0ec'
color: colorX,
fontSize: 16
}
}
}
],
yAxis: [
{
boundaryGap: false,
splitNumber: 4,
type: 'value',
// name: '%',
nameTextStyle: {
color: colorY,
fontSize: 14,
lineHeight: 20
},
axisLabel: {
textStyle: {
fontSize: 14,
// color: '#7696c5'
color: colorX
// color: this.colorY
}
},
splitLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisLine: {
show: true,
lineStyle: {
color: '#032c58'
}
},
axisTick: {
show: true
}
}
],
series: [
{
name: '数量',
type: 'bar',
barWidth: 25,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00FFE3'
},
{
offset: 1,
color: '#4693EC'
}
])
}
},
data: [228, 260, 230, 235, 227, 228, 233]
// data: [100, 98, 99, 100, 100, 99, 98, 96, 97, 100, 100, 99]
}
]
}
}
export function echart04() {
const indicatorList = [{
name: '人工智能图像识别'
},
{
name: '开发者工具'
},
{
name: '自动光学检测'
},
{
name: '虚拟量测VM'
},
{
name: '高频海量数据分析'
}]
const option = {
backgroundColor: 'transparent',
color: ['#0290ff', '#ffe533', '#ff4d4d', '#06f5bc'],
tooltip: {
show: false // 弹层数据去掉
},
legend: {
data: [
{
name: '使用率', icon: 'rect', itemStyle: {
color: '#06f5bc', borderWidth: 0
}
},
{
name: '实际使用率', icon: 'rect', itemStyle: {
color: '#0290ff', borderWidth: 0
}
}
],
top: 30,
show: true,
y: '1',
center: 0,
itemWidth: 12,
itemHeight: 12,
itemGap: 26,
z: 3,
// orient: 'horizontal',
textStyle: {
fontSize: 14,
color: '#edf8ff'
}
},
radar: {
center: ['50%', '65%'], // 外圆的位置
radius: '55%',
name: {
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 400,
fontFamily: 'PingFangSC-Regular,PingFang SC',
fontStyle: 'normal'
}
},
// TODO:
indicator: indicatorList,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ['rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
}
},
axisLine: {
// 指向外圈文本的分隔线样式
lineStyle: {
color: 'rgba(255,255,255,0)'
}
},
splitLine: {
lineStyle: {
type: 'solid',
color: '#0ac8ff', // 分隔线颜色
width: 2 // 分隔线线宽
}
}
},
series: [
{
type: 'radar',
data: [
{
value: [0, 0, 10, 30, 70],
name: '使用率',
areaStyle: {
normal: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: '#00ffb4' // 0% 处的颜色
},
{
offset: 0.15, color: '#00ffb4' // 100% 处的颜色
},
{
offset: 0.75, color: '#00ffb4' // 100% 处的颜色
},
{
offset: 1, color: '#00ffb4' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
symbolSize: [6, 6],
lineStyle: { // 边缘颜色
// width: 0
color: 'rgba(13, 248, 172, 0.8)'
// shadowBlur:8,
// shadowColor:'#ff3838'
},
itemStyle: {
color: '#fff',
borderColor: '#00ffb4',
borderWidth: 1,
shadowBlur: 8,
shadowColor: '#00ffb4'
}
},
{
value: [80, 80, 80, 70, 60],
name: '实际使用率',
areaStyle: {
normal: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'rgba(0,194,255, 0.8)' // 0% 处的颜色
},
{
offset: 0.15, color: 'rgba(0,194,255, 0.8)' // 100% 处的颜色
},
{
offset: 0.75, color: 'rgba(0,194,255, 0.8)' // 100% 处的颜色
},
{
offset: 1, color: 'rgba(0,194,255, 0.8)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
},
symbolSize: [6, 6],
lineStyle: { // 边缘颜色
// width: 0
color: 'rgba(0, 194, 255, 0.8)'
// shadowBlur:8,
// shadowColor:'#ff3838'
},
itemStyle: {
color: '#fff',
borderColor: '#00c8ff',
borderWidth: 1,
shadowBlur: 8,
shadowColor: '#00c8ff'
}
}
]
}
]
}
return option
}
export function echart05() {
var img = 'data:image/png;base64,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'
var trafficWay = [
{
name: '供应客户',
value: 9
}, {
name: '现场管理者',
value: 30
}, {
name: '工厂管理者',
value: 25
}, {
name: '企业决策者',
value: 23
}, {
name: '平台开发者',
value: 14
}]
var data = []
var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
for (var i = 0; i < trafficWay.length; i++) {
data.push({
value: trafficWay[i].value,
name: trafficWay[i].name,
itemStyle: {
normal: {
borderWidth: 5,
shadowBlur: 20,
borderColor: color[i],
shadowColor: color[i]
}
}
}, {
value: 2,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
})
}
var seriesOption = [{
name: '',
type: 'pie',
clockWise: false,
radius: [60, 66],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: 'outside',
color: '#ddd',
formatter: function(params) {
var percent = 0
var total = 0
for (var i = 0; i < trafficWay.length; i++) {
total += trafficWay[i].value
}
percent = ((params.value / total) * 100).toFixed(0)
if (params.name !== '') {
// return '缺陷名称：' + params.name + '\n' + '\n' + '占百分比：' + percent + '%'
return params.name + ' ' + percent + '%'
} else {
return ''
}
}
},
labelLine: {
length: 10,
length2: 30,
show: true,
color: '#00ffff'
}
}
},
data: data
}]
const option = {
backgroundColor: 'transparent',
color: color,
title: {
text: '',
top: '48%',
textAlign: 'center',
left: '49%',
textStyle: {
color: '#fff',
fontSize: 22,
fontWeight: '400'
}
},
graphic: {
elements: [{
type: 'image',
z: 3,
style: {
image: img,
width: 88,
height: 88
},
left: 'center',
top: 'center',
position: [100, 100]
}]
},
tooltip: {
show: false
},
// legend: {
// icon: 'circle',
// orient: 'horizontal',
// // x: 'left',
// data: ['压印', '孔小', '变形', '披锋'],
// right: 340,
// bottom: 150,
// align: 'right',
// textStyle: {
// color: '#fff'
// },
// itemGap: 20
// },
toolbox: {
show: false
},
series: seriesOption
}
return option
}