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月'], // 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月'] 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月'] }], 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)] } // { // 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月'] 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 + 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,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' ] // 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月'], 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() { }