368 lines
10 KiB
Vue
368 lines
10 KiB
Vue
<template>
|
|
<div id="batchEcharts" ></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "echarsDemo",
|
|
props: {
|
|
ydata: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true
|
|
},
|
|
ydata1: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true
|
|
},
|
|
xdata: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true
|
|
},
|
|
|
|
},
|
|
data(){
|
|
return{
|
|
|
|
};
|
|
},
|
|
watch:{
|
|
ydata:{
|
|
handler:function(newV){
|
|
console.log("newV",newV)
|
|
this.getLoadEcharts()
|
|
}
|
|
},
|
|
ydata1:{
|
|
handler:function(newV){
|
|
console.log("newV",newV)
|
|
this.getLoadEcharts()
|
|
}
|
|
},
|
|
xdata:{
|
|
handler:function(newV1){
|
|
console.log("newV1",newV1)
|
|
this.getLoadEcharts()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLoadEcharts()
|
|
console.log("111",this.xdata);
|
|
console.log("222",this.ydata);
|
|
},
|
|
methods:{
|
|
getLoadEcharts() {
|
|
var myChart = this.$echarts.init(document.getElementById("batchEcharts"));
|
|
// let value = [5, 7, 8, 9, 10, 11, 13, 15, 16, 14, 13, 12, 8, 6, 5, 4, 5, 6, 7, 8, 10, 11, 10, 8,12,13,9,6];
|
|
// let min = Math.min(...value); //计算最小值
|
|
// let max = Math.max(...value); //计算最大值
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
color: ["#52F478"],
|
|
icon: "circle",
|
|
// legend: {
|
|
// x:'580px',
|
|
// y: '30px',
|
|
// data: [{
|
|
// name: '月',
|
|
// icon:'none'
|
|
// },
|
|
// {
|
|
// name: '日',
|
|
// icon:'none'
|
|
// }],
|
|
// textStyle:{
|
|
// fontSize: 14,//字体大小
|
|
// color: '#BBF6FF',//字体颜色
|
|
|
|
// },
|
|
// selectedMode: 'single',
|
|
// },
|
|
grid: {
|
|
// top: "10px",
|
|
left: "6%", //默认10%
|
|
right: "10%", //默认10%
|
|
bottom: "8%", //默认60
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
name: "",
|
|
nameGap: "16",
|
|
show: true,
|
|
boundaryGap: "1%",
|
|
offset: 25,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#FFFFFF",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#BBF6FF",
|
|
width: 2,
|
|
},
|
|
symbol: ["none", "arrow"],
|
|
},
|
|
// data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28],
|
|
data:this.xdata
|
|
},
|
|
yAxis: [{
|
|
type: "value",
|
|
name: "单位: 分钟",
|
|
show: true,
|
|
offset: 48,
|
|
id:0,
|
|
nameTextStyle: {
|
|
color: "#ffffff",
|
|
padding: [0, -15, 15, 0],
|
|
// verticalAlign: 'top'
|
|
align: "right",
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
axisTick: {
|
|
//y轴刻度线
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgb(13,190,196)",
|
|
width: 1,
|
|
type: "dashed",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "rgb(8,99,116)",
|
|
width: 1,
|
|
},
|
|
symbol: ["none", "arrow"],
|
|
},
|
|
},{
|
|
type: "value",
|
|
name: "单位: Kg",
|
|
show: true,
|
|
offset: 30,
|
|
id:1,
|
|
nameTextStyle: {
|
|
color: "#ffffff",
|
|
padding: [0, -40, 15, 0],
|
|
// verticalAlign: 'top'
|
|
align: "right",
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
axisTick: {
|
|
//y轴刻度线
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgb(13,190,196)",
|
|
width: 1,
|
|
type: "dashed",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "rgb(8,99,116)",
|
|
width: 1,
|
|
},
|
|
symbol: ["none", "arrow"],
|
|
},
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "单位: 分钟",
|
|
type: "line",
|
|
smooth: true,
|
|
// symbol: "rect",
|
|
// symbolSize: 10,
|
|
yAxisIndex:0,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#4EEE79",
|
|
width: 3,
|
|
},
|
|
},
|
|
// areaStyle: {
|
|
// normal: {
|
|
// color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
// {
|
|
// offset: 0,
|
|
// color: "rgb(9,84,88)",
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: "rgb(9,71,72)",
|
|
// },
|
|
// ]),
|
|
// },
|
|
// },
|
|
// data: [3666, 2666, 1666, 234, 250, 899, 1200, 900, 2000, 666, 999,3666, 2666, 1666, 234, 250, 899, 1200, 900, 2000, 666, 999,1200, 900, 2000, 666, 999],
|
|
data:this.ydata1,
|
|
// markPoint: {
|
|
// data: [{ type: "max", name: "最大值" }],
|
|
// },
|
|
// symbol: function (value, params) {
|
|
// if (value == min || value == max) {
|
|
// return "circle"; //拐点类型
|
|
// } else {
|
|
// return "none"; //拐点不显示
|
|
// }
|
|
// },
|
|
markPoint: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#52F478",
|
|
borderColor: "#52F478", //拐点边框颜色
|
|
|
|
lineStyle: {
|
|
color: "#52F478", //折线颜色
|
|
},
|
|
label: { show: false, color: "#ffffff" },
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "单位:kg",
|
|
type: "line",
|
|
smooth: true,
|
|
stack: 'Total',
|
|
yAxisIndex:1,
|
|
// symbol: "rect",
|
|
// symbolSize: 10,
|
|
// lineStyle: {
|
|
// normal: {
|
|
// color: "rgb(4,252,254)",
|
|
// width: 3,
|
|
// },
|
|
// },
|
|
itemStyle: {
|
|
borderColor: 'transparent',
|
|
color: "rgb(4,252,254)",
|
|
normal: {
|
|
// 柱形图圆角，初始化效果
|
|
// barBorderRadius: [10, 10, 10, 10],
|
|
color: "rgb(4,252,254)",
|
|
}
|
|
},
|
|
// areaStyle: {
|
|
// normal: {
|
|
// color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
|
// {
|
|
// offset: 0,
|
|
// color: "rgb(9,84,88)",
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: "rgb(9,71,72)",
|
|
// },
|
|
// ]),
|
|
// },
|
|
// },
|
|
// data: [1200, 900, 2000, 666, 999,1200, 3666, 2666, 2666, 1666, 234, 250, 899, 1666, 234, 250, 899, 1200, 900, 2000, 666, 999,3666,900, 2000, 666, 999],
|
|
data:this.ydata,
|
|
// markPoint: {
|
|
// data: [{ type: "max", name: "最大值" }],
|
|
// },
|
|
// symbol: function (value, params) {
|
|
// if (value == min || value == max) {
|
|
// return "circle"; //拐点类型
|
|
// } else {
|
|
// return "none"; //拐点不显示
|
|
// }
|
|
// },
|
|
// markPoint: {
|
|
// show: false,
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: "#52F478",
|
|
// borderColor: "#52F478", //拐点边框颜色
|
|
|
|
// lineStyle: {
|
|
// color: "#52F478", //折线颜色
|
|
// },
|
|
// label: { show: false, color: "#ffffff" },
|
|
// },
|
|
// },
|
|
// emphasis: {
|
|
// itemStyle: {
|
|
// borderColor: 'transparent',
|
|
// color: 'transparent'
|
|
// }
|
|
// },
|
|
// data: [1000,2000, 1700, 1400, 1200, 300, 199,2000, 1700, 1400, 1200, 300, 199,2000, 1700, 1400, 1200, 300, 199]
|
|
},
|
|
// {
|
|
// name: 'Life Cost',
|
|
// type: 'bar',
|
|
// stack: 'Total',
|
|
// barWidth : 4,
|
|
// label: {
|
|
// show: false,
|
|
// position: 'inside'
|
|
// },
|
|
// itemStyle: {
|
|
// borderColor: 'transparent',
|
|
// color: "rgb(4,252,254)",
|
|
// normal: {
|
|
// // 柱形图圆角，初始化效果
|
|
// barBorderRadius: [15, 15, 15, 15],
|
|
// color: "rgb(4,252,254)",
|
|
// }
|
|
// },
|
|
// data: [2900, 1200, 300, 200, 900, 300,2900, 1200, 300, 200, 900, 300,2900, 1200, 300, 200, 900, 300]
|
|
// }
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#batchEcharts{
|
|
width: 90%;
|
|
height: 95%;
|
|
}
|
|
</style>
|