| | |
| | | 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", |
| | | ], |
| | | datay: [120, 200, 150, 380, 470, 150, 230, 330, 190, 440], |
| | | }, |
| | | startValue: 0, |
| | | endValue: 5, |
| | | chartTimer: null, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.pieChart("chart", this.chartData); |
| | | let chartData2 = [ |
| | | { value: 10, name: "一类" }, |
| | | { value: 20, name: "二类" }, |
| | | { value: 60, name: "三类" }, |
| | | { value: 10, name: "四类" }, |
| | | ]; |
| | | this.getChartRight("chart2", chartData2); |
| | | 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); |
| | | // 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: this.startValue, // 从头开始 |
| | | endValue: this.endValue, // 一次性展示几个 |
| | | }, |
| | | ], |
| | | legend: { |
| | |
| | | }, |
| | | ], |
| | | }; |
| | | |
| | | setInterval(function () { |
| | | // 每次向左滑动一个,最后一个从头开始。 |
| | | if (option.dataZoom[0].endValue == that.chartData.datay.length) { |
| | | this.chartTimer = setInterval(function () { |
| | | if (option.dataZoom[0].endValue == data.datay.length) { |
| | | option.dataZoom[0].startValue = 0; |
| | | option.dataZoom[0].endValue = 5; |
| | | } else { |