| | |
| | | import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue"; |
| | | //引入echart |
| | | import * as echarts from "echarts"; |
| | | let myChart; |
| | | export default { |
| | | components: { |
| | | ChartTitle, |
| | | }, |
| | | props: {}, |
| | | props: { |
| | | chartData: { |
| | | type: Object, |
| | | require: true, |
| | | default: () => { |
| | | return { |
| | | datax: [], |
| | | datay: [], |
| | | }; |
| | | }, |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | chartData: { |
| | | datax: [ |
| | | "产品1", |
| | | "产品2", |
| | | "产品3", |
| | | "产品4", |
| | | "产品5", |
| | | "产品6", |
| | | "产品7", |
| | | "产品8", |
| | | "产品9", |
| | | "产品10", |
| | | ], |
| | | datay: [120, 200, 150, 380, 470, 150, 230, 130, 210, 145, 330], |
| | | }, |
| | | startValue: 0, |
| | | endValue: 5, |
| | | chartTimer: null, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.pieChart("chart", this.chartData); |
| | | watch: { |
| | | "chartData.datay"(val) { |
| | | this.startValue = 0; |
| | | this.endValue = 5; |
| | | this.pieChart("chart", this.chartData); |
| | | }, |
| | | }, |
| | | watch: {}, |
| | | mounted() {}, |
| | | methods: { |
| | | //在职 |
| | | pieChart(chartName, data) { |
| | | let that = this; |
| | | clearInterval(this.chartTimer); |
| | | let chartDom = this.$refs[chartName]; |
| | | let myChart = echarts.init(chartDom); |
| | | if (myChart != null && myChart != "" && myChart != undefined) { |
| | | myChart.dispose(); //销毁 |
| | | } |
| | | myChart = echarts.init(chartDom); |
| | | let option; |
| | | let lineColor = "#35ddc74d"; |
| | | if (data) { |
| | |
| | | type: "inside", |
| | | yAxisIndex: 0, |
| | | show: false, |
| | | startValue: 0, // 从头开始 |
| | | endValue: 5, // 一次性展示几个 |
| | | startValue: that.startValue, // 从头开始 |
| | | endValue: that.endValue, // 一次性展示几个 |
| | | }, |
| | | ], |
| | | legend: { |
| | |
| | | }, |
| | | ], |
| | | }; |
| | | setInterval(function () { |
| | | // 每次向左滑动一个,最后一个从头开始。 |
| | | this.chartTimer = setInterval(function () { |
| | | if (option.dataZoom[0].endValue == that.chartData.datay.length) { |
| | | option.dataZoom[0].startValue = 0; |
| | | option.dataZoom[0].endValue = 5; |