'init'
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div ref="chartContainer" class="chartContainer" style="width: 100%; height: calc(100% - 36px)" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons'
|
||||
|
||||
export default {
|
||||
name: 'FaultCategoryChart',
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
configs: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', function() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 12,
|
||||
bottom: 10,
|
||||
width: '100%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
opacity: 0.3
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: [10, 52, 200, 334, 390, 330, 220]
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
this.chart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chartContainer >>> div {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
// import 'echarts/theme/macarons'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'PlFaultAnalysisPieChart',
|
||||
mixins: [resize],
|
||||
props: {},
|
||||
data() {
|
||||
let totalRate = 0
|
||||
const colors = [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#FB418C00', offset: 0.1 },
|
||||
{ color: '#FB418C', offset: 1 } // 红
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#DDB11200', offset: 0.1 },
|
||||
{ color: '#DDB112', offset: 1 } // 黄
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#1A99FF00', offset: 0.1 },
|
||||
{ color: '#1A99FF', offset: 1 } // 兰
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#A691FF00', offset: 0.1 },
|
||||
{ color: '#A691FF', offset: 1 } // 紫 3
|
||||
],
|
||||
global: false
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ color: '#FFFFFF00', offset: 0 },
|
||||
{ color: '#49FBD600', offset: 0.1 },
|
||||
{ color: '#49FBD6', offset: 1 } // 绿
|
||||
],
|
||||
global: false
|
||||
}
|
||||
]
|
||||
|
||||
return {
|
||||
chart: null,
|
||||
// default configs
|
||||
configs: {
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
left: '59%',
|
||||
top: '35%',
|
||||
text: '33039',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 26,
|
||||
fontWeight: 'normal'
|
||||
},
|
||||
subtext: '总数',
|
||||
subtextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontWeight: 'lighter'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: '20%',
|
||||
bottom: '25%',
|
||||
left: 0,
|
||||
orient: 'vertical',
|
||||
icon: 'none',
|
||||
formatter: function(name) {
|
||||
// test data - dynamic
|
||||
const testData = [
|
||||
{ name: 'A', value: 100 },
|
||||
{ name: 'B', value: 200 },
|
||||
{ name: 'C', value: 300 },
|
||||
{ name: 'D', value: 400 },
|
||||
{ name: 'E', value: 500 }
|
||||
]
|
||||
let pieLegendVale = {}
|
||||
testData.filter((item, index) => {
|
||||
if (item.name === name) {
|
||||
pieLegendVale = item
|
||||
}
|
||||
})
|
||||
const color = ['c', 'd', 'e', 'f', 'g']
|
||||
const arr = [
|
||||
'{' + color[testData.findIndex(item => item.name === name)] + '|}',
|
||||
'{b|' + pieLegendVale.name + '}',
|
||||
'{a|' + pieLegendVale.value + '}'
|
||||
]
|
||||
return arr.join(' ')
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
align: 'center',
|
||||
fontSize: 10,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
lineHeight: 16
|
||||
},
|
||||
b: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
fontSize: 10,
|
||||
color: 'rgba(255, 255, 255)'
|
||||
},
|
||||
c: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#FB418C'
|
||||
// backgroundColor: '#1A99FF'
|
||||
},
|
||||
d: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#DDB112'
|
||||
// backgroundColor: '#A691FF'
|
||||
},
|
||||
e: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#1A99FF'
|
||||
// backgroundColor: '#FB418C'
|
||||
},
|
||||
f: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#A691FF'
|
||||
// backgroundColor: '#49FBD6'
|
||||
},
|
||||
g: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#49FBD6'
|
||||
// backgroundColor: '#DDB112'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'PieForm',
|
||||
type: 'pie',
|
||||
center: ['60%', '45%'],
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
formatter: params => {
|
||||
const colorMap = ['first', 'second', 'third', 'fourth', 'fifth']
|
||||
return `{${colorMap[params.dataIndex]}|${params.percent} %}`
|
||||
},
|
||||
rich: {
|
||||
first: { color: '#FB418C', fontSize: 12 },
|
||||
second: { color: '#DDB112', fontSize: 12 },
|
||||
third: { color: '#1A99FF', fontSize: 12 },
|
||||
fourth: { color: '#A691FF', fontSize: 12 },
|
||||
fifth: { color: '#49FBD6', fontSize: 12 }
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: params => {
|
||||
/** 计算渐变方向的过程，只靠 dataIndex 不太行 */
|
||||
const { dataIndex, percent } = params
|
||||
const colorGradient = colors[dataIndex]
|
||||
if (totalRate + percent < 25) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
(() => {})()
|
||||
} else if (totalRate + percent < 50) {
|
||||
colorGradient.x = 0
|
||||
colorGradient.y = 0
|
||||
colorGradient.x2 = 1
|
||||
colorGradient.y2 = 1
|
||||
} else if (totalRate + percent < 100) {
|
||||
/** 也许这里需要完善，但目前工作良好 */
|
||||
(() => {})()
|
||||
}
|
||||
|
||||
totalRate += percent
|
||||
return colorGradient
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 100, name: 'A' },
|
||||
{ value: 200, name: 'B' },
|
||||
{ value: 300, name: 'C' },
|
||||
{ value: 400, name: 'D' },
|
||||
{ value: 500, name: 'E' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', function() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
|
||||
|
||||
this.chart.setOption(this.configs)
|
||||
|
||||
this.chart.resize()
|
||||
})
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chartContainer >>> div {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
301
src/views/QualityManager/components/charts/newBar.vue
Normal file
301
src/views/QualityManager/components/charts/newBar.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div
|
||||
ref="chartContainer"
|
||||
class="chartContainer"
|
||||
:class="bindClass"
|
||||
style="position: relative; width: 100%; height: calc(100% - 36px)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts' // echarts theme
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
chartName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
xlabelFontSize: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
xlabelRotate: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
nameList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bindClass() {
|
||||
return {
|
||||
'fault-category-chart': this.chartName === 'fault-category',
|
||||
'process-fault-chart': this.chartName === 'process-fault'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.dataList.length > 1) {
|
||||
this.series = [
|
||||
{
|
||||
// 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{
|
||||
// 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 26,
|
||||
symbol: 'diamond',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [30, 12],
|
||||
zlevel: 2,
|
||||
itemStyle: { color: this.dataList[0].topColor },
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{
|
||||
// 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 26,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [30, 15],
|
||||
itemStyle: { color: this.dataList[0].bottomColor },
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{
|
||||
// 柱体
|
||||
name: this.dataList[1].name,
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[1].data
|
||||
},
|
||||
{
|
||||
// 柱顶
|
||||
name: this.dataList[1].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 26,
|
||||
symbol: 'diamond',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [30, 12],
|
||||
zlevel: 2,
|
||||
itemStyle: { color: this.dataList[1].topColor },
|
||||
data: this.dataList[1].data
|
||||
},
|
||||
{
|
||||
// 柱底
|
||||
name: this.dataList[1].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 26,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [30, 15],
|
||||
itemStyle: { color: this.dataList[1].topColor },
|
||||
data: this.dataList[1].data
|
||||
}
|
||||
]
|
||||
} else {
|
||||
const barWidth = 400 / 2 / this.dataList[0].data.length
|
||||
this.series = [
|
||||
{
|
||||
// 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
])
|
||||
// borderWidth: 1,
|
||||
// borderColor: this.dataList[0].bottomColor + '66' // 边框颜色+透明度
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
// backgroundStyle: {
|
||||
// // borderColor: this.dataList[0].bottomColor,
|
||||
// borderColor: '#ff0000',
|
||||
// borderWidth: 1
|
||||
// }
|
||||
},
|
||||
{
|
||||
// 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
symbol: 'circle',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [barWidth, 6],
|
||||
zlevel: 2,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
|
||||
{ offset: 1, color: '#2c6e7d' }
|
||||
])
|
||||
},
|
||||
label: {
|
||||
color: this.chartName === 'process-fault' ? 'rgba(119, 255, 242, 1)' : '#31a2ff',
|
||||
show: true,
|
||||
offset: [0, 10],
|
||||
position: 'top',
|
||||
vertialAlign: 'bottom'
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{
|
||||
// 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
symbol: 'circle',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [barWidth, 6],
|
||||
itemStyle: { color: '#2c6e7d' },
|
||||
data: this.dataList[0].data
|
||||
}
|
||||
]
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
console.log('on Mounted(): ')
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chartContainer)
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontSize: this.xlabelFontSize,
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
},
|
||||
margin: 20,
|
||||
rotate: this.xlabelRotate
|
||||
},
|
||||
data: this.nameList
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: this.dataList[0].bottomColor,
|
||||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: 'rgba(119, 255, 242, 0.2)'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
series: this.series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.chartContainer >>> div {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
/* position: relative !important; */
|
||||
}
|
||||
|
||||
.fault-category-chart >>> div::before {
|
||||
/* .fault-category-chart::before { */
|
||||
content: '';
|
||||
position: absolute;
|
||||
/* bottom: calc(100vh/1920 * 80);
|
||||
left: calc(100vw/1920 * 48); */
|
||||
/* bottom: calc(10% + 100vh/1920 * 28); */
|
||||
bottom: 25px;
|
||||
left: 9%;
|
||||
height: 52px;
|
||||
width: 90%;
|
||||
background: linear-gradient(to top, #31a2ff6d, transparent);
|
||||
transform: skew(-45deg);
|
||||
z-index: 0;
|
||||
}
|
||||
.process-fault-chart >>> div::before {
|
||||
/* .process-fault-chart::before { */
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 26px;
|
||||
left: 10%;
|
||||
height: 48px;
|
||||
width: 90%;
|
||||
background: linear-gradient(to top, #49fbd789, transparent);
|
||||
transform: skew(-45deg);
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
274
src/views/QualityManager/components/charts/newLineStack.vue
Normal file
274
src/views/QualityManager/components/charts/newLineStack.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<template>
|
||||
<div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: calc(100% - 36px)" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'PlFaultAnalysisPieChart',
|
||||
mixins: [resize],
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
configs: {
|
||||
color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
// },
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '2%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff66'
|
||||
}
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,1)' //
|
||||
},
|
||||
margin: 20
|
||||
},
|
||||
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '成品率',
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
fontSize: 10,
|
||||
align: 'right'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: 'rgba(119, 255, 242, 0.2)'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'A1下片机',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
// color: 'rgba(50,145,152,0.5)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FB418C' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [11, 199, 140, 63, 185, 5, 78]
|
||||
},
|
||||
{
|
||||
name: '磨边机',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
|
||||
areaStyle: {
|
||||
// color: 'rgba(50,145,152,0.5)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#DDB112' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [151, 57, 31, 7, 77, 88, 119]
|
||||
},
|
||||
{
|
||||
name: '镀膜机',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
|
||||
areaStyle: {
|
||||
// color: 'rgba(50,145,152,0.5)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#1A99FF' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [58, 3, 67, 100, 42, 96, 124]
|
||||
},
|
||||
{
|
||||
name: '包装纸',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
|
||||
areaStyle: {
|
||||
// color: 'rgba(50,145,152,0.5)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#A691FF' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [92, 88, 122, 169, 108, 130, 147]
|
||||
},
|
||||
{
|
||||
name: '丝印',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
areaStyle: {
|
||||
// color: 'rgba(50,145,152,0.5)'
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#49FBD6' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'transparent' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [44, 40, 118, 197, 123, 95, 96]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', function() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
|
||||
|
||||
this.chart.setOption(this.configs)
|
||||
this.chart.resize()
|
||||
})
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chartContainer >>> div {
|
||||
width: 100% !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user