311 lines
6.7 KiB
Vue
311 lines
6.7 KiB
Vue
<template>
|
|
<div :class="className" :style="{ height: height, width: width }" />
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
require('echarts/theme/macarons'); // echarts theme
|
|
import resize from '../mixins/resize';
|
|
import { max } from 'moment';
|
|
|
|
const animationDuration = 6000;
|
|
|
|
export default {
|
|
mixins: [resize],
|
|
props: {
|
|
echartData: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
className: {
|
|
type: String,
|
|
default: 'chart',
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%',
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '380px',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$nextTick(() => {
|
|
this.initChart();
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
if (!this.chart) {
|
|
return;
|
|
}
|
|
this.chart.dispose();
|
|
this.chart = null;
|
|
},
|
|
methods: {
|
|
initChart(permission) {
|
|
var option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999',
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
top: 100,
|
|
left: '2%',
|
|
right: '3%',
|
|
bottom: '3%',
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
data: [
|
|
'产量',
|
|
{
|
|
name: '成本',
|
|
icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
|
|
},
|
|
{
|
|
name: '良品率',
|
|
icon: 'path://M1255.570286 1024a512 512 0 1 0 0-1024 512 512 0 0 0 0 1024z m641.609143-512c0 37.376-3.072 74.020571-8.923429 109.714286h393.069714c59.611429 0 107.958857-49.152 107.958857-109.714286s-48.274286-109.714286-107.958857-109.714286h-393.069714c5.851429 35.693714 8.923429 72.338286 8.923429 109.714286zM156.745143 621.714286h453.12a672.914286 672.914286 0 0 1 0-219.428572H156.745143C97.133714 402.285714 48.786286 451.437714 48.786286 512s48.274286 109.714286 107.958857 109.714286z',
|
|
},
|
|
],
|
|
itemWidth: 18,
|
|
itemHeight: 18,
|
|
textStyle: {
|
|
fontSize: 18,
|
|
color: '#DFF1FE',
|
|
},
|
|
top: 15,
|
|
right: 20,
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: this.echartData.map((item) => {
|
|
return item.time;
|
|
}),
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#97B3FF', // 左边线的颜色
|
|
width: '1', // 坐标线的宽度
|
|
},
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '单位/片',
|
|
min: 0,
|
|
position: 'left',
|
|
alignTicks: true,
|
|
axisLabel: {
|
|
color: 'white',
|
|
},
|
|
nameTextStyle: {
|
|
color: 'white',
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#97B3FF', // 左边线的颜色
|
|
width: '1', // 坐标线的宽度
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#b6c1e1',
|
|
},
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '%',
|
|
max: 100,
|
|
min: 0,
|
|
minInterval: 1,
|
|
position: 'right',
|
|
axisLabel: {
|
|
color: 'white',
|
|
},
|
|
nameTextStyle: {
|
|
color: 'white',
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#97B3FF', // 左边线的颜色
|
|
width: '1', // 坐标线的宽度
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#b6c1e1',
|
|
},
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '万元',
|
|
min: 0,
|
|
position: 'right',
|
|
alignTicks: true,
|
|
offset: 40,
|
|
axisLabel: {
|
|
color: 'white',
|
|
},
|
|
nameTextStyle: {
|
|
color: 'white',
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#97B3FF', // 左边线的颜色
|
|
width: '1', // 坐标线的宽度
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#b6c1e1',
|
|
},
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '产量',
|
|
type: 'bar',
|
|
barWidth: '14px',
|
|
data: this.echartData.map((item) => {
|
|
return Number(item.out).toFixed(1);
|
|
}),
|
|
animationDuration,
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value + ' 片';
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: '#5CB7FF' },
|
|
{ offset: 1, color: '#364BFE' },
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
name: '成本',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
symbolSize: 8,
|
|
yAxisIndex: 2,
|
|
data: this.echartData.map((item) => {
|
|
return Number(item.price).toFixed(1);
|
|
}),
|
|
animationDuration,
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value + ' 万元';
|
|
},
|
|
},
|
|
lineStyle: {
|
|
color: '#FF1295',
|
|
},
|
|
itemStyle: {
|
|
color: '#FF1295',
|
|
borderWidth: 1, // 圆点边框宽度（可选）
|
|
},
|
|
areaStyle: {
|
|
opacity: 0.2,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#FF1295',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'transparent',
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
{
|
|
name: '良品率',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
symbolSize: 8,
|
|
yAxisIndex: 1,
|
|
data: this.echartData.map((item) => {
|
|
return Number(item.ratio).toFixed(1);
|
|
}),
|
|
animationDuration,
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value + ' %';
|
|
},
|
|
},
|
|
lineStyle: {
|
|
color: '#12FFF5',
|
|
},
|
|
itemStyle: {
|
|
color: '#12FFF5',
|
|
borderWidth: 1, // 圆点边框宽度（可选）
|
|
},
|
|
areaStyle: {
|
|
opacity: 0.2,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#12FFF5',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'transparent',
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
if(permission){
|
|
option.series[1]=[]
|
|
}
|
|
if (this.chart) {
|
|
this.chart.setOption(option);
|
|
} else {
|
|
this.chart = echarts.init(this.$el, 'macarons');
|
|
this.chart.setOption(option);
|
|
}
|
|
window.addEventListener('resize', () => {
|
|
this.chart.resize();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|