| | |
| | | <script> |
| | | //引入echart |
| | | import * as echarts from "echarts"; |
| | | let myChart; |
| | | export default { |
| | | components: {}, |
| | | props: {}, |
| | | props: { |
| | | chartData: { |
| | | type: Object, |
| | | require: true, |
| | | default: () => { |
| | | return { |
| | | datax: [], |
| | | datay: [], |
| | | }; |
| | | }, |
| | | }, |
| | | // xdata: { |
| | | // type: Array, |
| | | // require: true, |
| | | // }, |
| | | // ydata: { |
| | | // type: Array, |
| | | // require: true, |
| | | // }, |
| | | }, |
| | | data() { |
| | | return { |
| | | chartData: { |
| | | datax: [ |
| | | "设备1", |
| | | "设备2", |
| | | "设备3", |
| | | "设备4", |
| | | "设备5", |
| | | "设备6", |
| | | "设备7", |
| | | "设备8", |
| | | "设备9", |
| | | ], |
| | | datay: [10, 20, 15, 38, 47, 50, 20, 33, 25, 48], |
| | | }, |
| | | // chartData: { |
| | | // datax: [], |
| | | // datay: [], |
| | | // }, |
| | | startValue: 0, |
| | | endValue: 5, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.pieChart("chart", this.chartData); |
| | | watch: { |
| | | "chartData.datay"(val) { |
| | | console.log(val, "ddddddddddddddd"); |
| | | this.ydata = val; |
| | | this.startValue = 0; |
| | | this.endValue = 5; |
| | | this.pieChart("chart", this.chartData); |
| | | }, |
| | | }, |
| | | watch: {}, |
| | | mounted() { |
| | | // this.pieChart("chart", this.chartData); |
| | | }, |
| | | methods: { |
| | | //在职 |
| | | pieChart(chartName, data) { |
| | | let that = this; |
| | | let chartDom = this.$refs[chartName]; |
| | | let myChart = echarts.init(chartDom); |
| | | if (myChart != null && myChart != "" && myChart != undefined) { |
| | | console.log("222222222"); |
| | | myChart.dispose(); //销毁 |
| | | myChart.resize(); |
| | | } |
| | | console.log(myChart, "ssssssss"); |
| | | myChart = echarts.init(chartDom); |
| | | let option; |
| | | let lineColor = "#35ddc74d"; |
| | | if (data) { |
| | | if (this.ydata) { |
| | | option = { |
| | | color: ["#00FFFF", "#dcb018"], |
| | | tooltip: { |
| | |
| | | type: "inside", |
| | | yAxisIndex: 0, |
| | | show: false, |
| | | startValue: 0, // 从头开始 |
| | | endValue: 5, // 一次性展示几个 |
| | | startValue: that.startValue, // 从头开始 |
| | | endValue: that.endValue, // 一次性展示几个 |
| | | }, |
| | | ], |
| | | legend: { |
| | |
| | | }; |
| | | |
| | | setInterval(function () { |
| | | // 每次向左滑动一个,最后一个从头开始。 |
| | | if (option.dataZoom[0].endValue == that.chartData.datay.length) { |
| | | option.dataZoom[0].startValue = 0; |
| | | option.dataZoom[0].endValue = 5; |
| | | if (option.dataZoom[0].endValue == data.datay.length) { |
| | | option.dataZoom[0].startValue = that.startValue; |
| | | option.dataZoom[0].endValue = that.endValue; |
| | | } else { |
| | | option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; |
| | | option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; |