327 lines
8.5 KiB
Vue
327 lines
8.5 KiB
Vue
<template>
|
|
<div id="statisticsEcharts" ></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "echarsDemo",
|
|
props: {
|
|
ydata: {
|
|
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.getRuKuEcharts()
|
|
}
|
|
},
|
|
xdata:{
|
|
handler:function(newV1){
|
|
console.log("newV1",newV1)
|
|
this.getRuKuEcharts()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getRuKuEcharts()
|
|
console.log("111",this.xdata);
|
|
console.log("222",this.ydata);
|
|
},
|
|
methods:{
|
|
getRuKuEcharts() {
|
|
var myChart = this.$echarts.init(
|
|
document.getElementById("statisticsEcharts")
|
|
);
|
|
// 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: "750px",
|
|
// y: "0px",
|
|
// itemGap: 0.5,
|
|
// data: [
|
|
// {
|
|
// name: "年",
|
|
// icon: "none",
|
|
// },
|
|
// {
|
|
// name: "月",
|
|
// icon: "none",
|
|
// },
|
|
// {
|
|
// name: "日",
|
|
// icon: "none",
|
|
// },
|
|
// ],
|
|
// textStyle: {
|
|
// fontSize: 14, //字体大小
|
|
// color: "#29f0f1", //字体颜色
|
|
// },
|
|
// selectedMode: "single",
|
|
// },
|
|
grid: {
|
|
top: "10px",
|
|
left: "5%", //默认10%
|
|
right: "5%", //默认10%
|
|
bottom: "8%", //默认60
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
name: "",
|
|
nameGap: "16",
|
|
show: true,
|
|
boundaryGap: false,
|
|
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],
|
|
data:this.xdata,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
name: "",
|
|
show: true,
|
|
offset: "40",
|
|
// position: 'absolute',
|
|
// boundaryGap: false,
|
|
splitNumber: 10,
|
|
nameTextStyle: {
|
|
color: "#ffffff",
|
|
padding: [0, -15, 30, 0],
|
|
// verticalAlign: 'top'
|
|
align: "right",
|
|
},
|
|
// axisLabel: {
|
|
// textStyle: {
|
|
// color: "#ffffff",
|
|
// },
|
|
// },
|
|
// min: ymin,
|
|
// max: ymax,
|
|
axisTick: {
|
|
//y轴刻度线
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "rgb(13,190,196)",
|
|
width: 1,
|
|
type: "dashed",
|
|
},
|
|
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "rgb(8,99,116)",
|
|
width: 1,
|
|
},
|
|
symbol: ["none", "arrow"],
|
|
},
|
|
axisLabel:{
|
|
textStyle:{
|
|
align:'right' ,
|
|
color: "#ffffff", // 文字右对齐
|
|
},
|
|
// inside:true, // 标签刻度朝内
|
|
margin:30, // 清除默认间距
|
|
padding:[0,10,0,0], // 右边内边距10
|
|
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "入库量",
|
|
type: "bar",
|
|
smooth: true,
|
|
// symbol:'rect',
|
|
// symbolSize:10,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#29f0f1",
|
|
width: 3,
|
|
},
|
|
},
|
|
|
|
// data: [
|
|
// 44444, 55555, 77777, 6666, 66666, 55555, 33333, 88888, 99999,
|
|
// 22222, 33333, 55555,
|
|
// ],
|
|
data:this.ydata,
|
|
markPoint: {
|
|
show: true,
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#29f0f1",
|
|
borderColor: "#29f0f1", //拐点边框颜色
|
|
|
|
lineStyle: {
|
|
color: "#29f0f1", //折线颜色
|
|
},
|
|
label: { show: false,
|
|
// color: "#ffffff" ,
|
|
position: 'top', //数值在上方显示
|
|
textStyle: { //数值样式
|
|
color: '#D1DBFF', //字体颜色
|
|
fontSize: 11 //字体大小
|
|
}
|
|
},
|
|
},
|
|
},
|
|
},
|
|
// {
|
|
// name: "年",
|
|
// type: "line",
|
|
// smooth: true,
|
|
// // symbol:'rect',
|
|
// // symbolSize:10,
|
|
// lineStyle: {
|
|
// normal: {
|
|
// color: "#29f0f1",
|
|
// width: 3,
|
|
// },
|
|
// },
|
|
|
|
// data: [
|
|
// 28888, 3444, 6666, 4888, 3444, 2333, 1200, 900, 2000, 666, 44444,
|
|
// 55555,
|
|
// ],
|
|
// markPoint: {
|
|
// show: true,
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: "#ffffff",
|
|
// borderColor: "#29f0f1", //拐点边框颜色
|
|
|
|
// lineStyle: {
|
|
// color: "#29f0f1", //折线颜色
|
|
// },
|
|
// label: { show: false, color: "#ffffff" },
|
|
// },
|
|
// },
|
|
// },
|
|
// {
|
|
// name: "月",
|
|
// type: "line",
|
|
// smooth: true,
|
|
// // symbol:'rect',
|
|
// // symbolSize:10,
|
|
// lineStyle: {
|
|
// normal: {
|
|
// color: "#29f0f1",
|
|
// width: 3,
|
|
// },
|
|
// },
|
|
// data: [
|
|
// 28888, 3444, 6666, 4888, 3444, 2333, 1200, 900, 2000, 666, 44444,
|
|
// 55555,
|
|
// ],
|
|
// markPoint: {
|
|
// show: true,
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: "#ffffff",
|
|
// borderColor: "#29f0f1", //拐点边框颜色
|
|
|
|
// lineStyle: {
|
|
// color: "#29f0f1", //折线颜色
|
|
// },
|
|
// label: { show: false, color: "#ffffff" },
|
|
// },
|
|
// },
|
|
// },
|
|
// {
|
|
// name: "日",
|
|
// type: "line",
|
|
// smooth: true,
|
|
// // symbol:'rect',
|
|
// // symbolSize:10,
|
|
// lineStyle: {
|
|
// normal: {
|
|
// color: "#29f0f1",
|
|
// width: 3,
|
|
// },
|
|
// },
|
|
// data: [
|
|
// 28888, 3444, 6666, 4888, 3444, 2333, 1200, 900, 2000, 666, 44444,
|
|
// 55555,
|
|
// ],
|
|
// markPoint: {
|
|
// show: true,
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: "#ffffff",
|
|
// borderColor: "#29f0f1", //拐点边框颜色
|
|
|
|
// lineStyle: {
|
|
// color: "#29f0f1", //折线颜色
|
|
// },
|
|
// label: { show: false, color: "#ffffff" },
|
|
// },
|
|
// },
|
|
// },
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#statisticsEcharts{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|