echarts常见图形-时间轴(五)

1.最终效果图

2.echarts文件(timeline.js)

let option = {
  baseOption: {
    textStyle: {
      fontFamily: "BebasNeue"
    },
    timeline: {
      axisType: "category",
      // realtime: false,
      // loop: false,
      autoPlay: false,
      // currentIndex: 4,
      currentIndex: new Date().getMonth(), //当前所处月份下标
      playInterval: 20 * 1000,
      // controlStyle: {
      //     position: 'left'
      // },
      left: 10,
      right: 10,
      top: 2,
      bottom: 0,
      data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
      label: {
        rotate: 40, //标签倾斜角度
        color: "#BBE2FF"
      },
      lineStyle: {
        color: "#1C72B4",
        width: 1
      },
      itemStyle: {
        color: "#1C72B4"
      },
      symbol: "circle",
      checkpointStyle: {
        color: "#3DABFF",
        borderColor: "rgba(28,114,180, 0.5)"
      },
      controlStyle: {
        borderColor: "#3DABFF",
        itemSize: 18,
        itemGap: 30
      },
      emphasis: {
        label: {
          color: "#3DABFF",
          fontSize: 14,
          fontWeight: 900
        },
        itemStyle: {
          color: "#1C72B4"
        },
        controlStyle: {
          borderColor: "#3DABFF"
        }
      }
    },
    calculable: true
  }
};
export default option;

3.vue文件中

3.1 html

<div style="height: 60px;width: 458px;" ref="timelineChart"></div>

3.2 js逻辑处理(引入timeline.js)

<script>
	import timelineOption from "@/assets/js/xxjyzt/timeline";
	export default {
		data(){
      		month: (new Date().getMonth() + 1).toString().padStart("2", "0")
		},
		methods: {
			//时间轴
		    timeEcharts() {
		      let _this = this;
		      let timelineChart = this.$echarts.init(this.$refs.timelineChart);
		      timelineChart.setOption(timelineOption);
		      timelineChart.off("click");
		      timelineChart.on("click", function(params) {
		        _this.month = params.name.replace("月", "").padStart(2, "0");
		      });
		      // 点击自动轮播
		      timelineChart.on("timelinechanged", function(params) {
		        let data = timelineOption.baseOption.timeline.data[params.currentIndex];
		        _this.month = data.replace("月", "").padStart(2, "0");
		      });
		      timelineChart.resize();
		    }
		},
		mounted() {
			this.timeEcharts(); //时间轴
		}
	}
</script>