303 lines
8.1 KiB
Vue
303 lines
8.1 KiB
Vue
<template>
|
|
<div id="statisticsEchsrts"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "echarsDemo",
|
|
props: {
|
|
// id: {
|
|
// type: String,
|
|
// required: true,
|
|
// default: true,
|
|
// },
|
|
ydata: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true,
|
|
},
|
|
xdata: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
watch: {
|
|
id: {
|
|
handler: function (newV) {
|
|
console.log("newV", newV);
|
|
this.getRuKuEcharts();
|
|
},
|
|
},
|
|
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("statisticsEchsrts")
|
|
);
|
|
// 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: {
|
|
left: "10%", //默认10%
|
|
right: "5%", //默认10%
|
|
// bottom: "8%", //默认60
|
|
},
|
|
dataZoom: [
|
|
//滑动条
|
|
{
|
|
type: "slider",
|
|
show: true,
|
|
xAxisIndex: [0],
|
|
start: 0,
|
|
end: 33,
|
|
// handleSize: 10,//左右2个滑动条的大小
|
|
borderColor: "rgba(8,50,56,0)", //滑动通道的边框颜色
|
|
fillerColor: "rgba(8,50,56,0)", //滑动条颜色
|
|
backgroundColor: "rgba(8,50,56,0)", //未选中的滑动条的颜色
|
|
showDataShadow: false, //是否显示数据阴影 默认auto
|
|
// textStyle:{
|
|
// color:"#ccd7d7"
|
|
// }
|
|
},
|
|
],
|
|
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: this.dateArry,
|
|
data: this.xdata,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
name: "单位: 千克",
|
|
show: true,
|
|
offset: "35",
|
|
// position: 'absolute',
|
|
nameTextStyle: {
|
|
color: "#ffffff",
|
|
padding: [0, -15, 30, 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: false,
|
|
// symbol:'rect',
|
|
// symbolSize:10,
|
|
lineStyle: {
|
|
normal: {
|
|
color: "#29f0f1",
|
|
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],
|
|
data: this.ydata,
|
|
// markPoint: {
|
|
// data: [{ type: "max", name: "最大值" }],
|
|
// },
|
|
// symbol: function (value, params) {
|
|
// if (value == min || value == max) {
|
|
// return "circle"; //拐点类型
|
|
// } else {
|
|
// return "none"; //拐点不显示
|
|
// }
|
|
// },
|
|
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,
|
|
// },
|
|
// },
|
|
// // 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: [5000, 3444, 6666, 4888, 3444, 2333, 1200, 900, 2000, 666],
|
|
// data: this.ydata,
|
|
// // markPoint: {
|
|
// // data: [{ type: "max", name: "最大值" }],
|
|
// // },
|
|
// // symbol: function (value, params) {
|
|
// // if (value == min || value == max) {
|
|
// // return "circle"; //拐点类型
|
|
// // } else {
|
|
// // return "none"; //拐点不显示
|
|
// // }
|
|
// // },
|
|
// markPoint: {
|
|
// show: true,
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: "#ffffff",
|
|
// borderColor: "#29f0f1", //拐点边框颜色
|
|
|
|
// lineStyle: {
|
|
// color: "#29f0f1", //折线颜色
|
|
// },
|
|
// label: { show: false, color: "#ffffff" },
|
|
// },
|
|
// },
|
|
// },
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
#statisticsEchsrts {
|
|
height: 93%;
|
|
width: 77%;
|
|
}
|
|
</style>
|