Echars,关于时间轴问题(笔记)

最新推荐文章于 2024-07-24 10:14:45 发布

子鱼非也

最新推荐文章于 2024-07-24 10:14:45 发布

阅读量649

点赞数 1

本文链接：https://blog.csdn.net/qq_44835285/article/details/103258227

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts-en.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">				  	</script>	
		<script src=""></script>
	</head>
	<body>
		<div id="main" style="height:400px"></div>
	</body>
		<script type="text/javascript">
		var dom = document.getElementById("main");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		setTimeout(function () {
		
		    option = {
		        legend: {},
		        tooltip: {
		            trigger: 'axis',
		            showContent: false
		        },
		        dataset: {
					
		            source: [
		                ['已发货', 1010, 900, 512, ],
		                ['未发货', 600, 1111, 450, ],
		                ['待发货', 1110, 930, 1250,]
		            ]
		        },
		        xAxis: {  
		                            type : 'category',
		                            boundaryGap : true,
		                            data : (function (){
		                                var now = new Date();
		                                //这里是关于获取当前年月日的设置(已忽略)
										// var year=now.getFullYear();
										// var month = now.getMonth() + 1 < 10 ? "0" + (now.getMonth() + 1)
										// 		: now.getMonth() + 1;
										// var	day = now.getDate() < 10 ? "0" + now.getDate() : now
										// 		          .getDate();
		                                var res = [];
		                                var len =3;
		                                while (len--) {
		                                //关于12小时改24小时方法toLocaleString('chinese',{hour12:false})
		                                    res.unshift(now.toLocaleString('chinese',{hour12:false}).replace(/^\D*/,''));
		                                    now = new Date(now - 86400000);
		                                }
		                                return res;
		                            })()
		                        },
		        yAxis: {gridIndex: 0},
		        grid: {top: '55%'},
		        series: [
		             //显示折线
					   {
					            type:'line',
					            data:[1010, 900, 512, ]
					        },
						{
						         type:'line',
						         data:[600, 1111, 450, ]
						     },	
						{
						         type:'line',
						         data:[1110, 930, 1250, ]
						     },	
						     //原版的代码(已忽略)
		            // {type: 'line', smooth: true, seriesLayoutBy: 'row'},
		            // {type: 'line', smooth: true, seriesLayoutBy: 'row'},
		            // {type: 'line', smooth: true, seriesLayoutBy: 'row'},
		            {
		                type: 'pie',
		                id: 'pie',
		                radius: '30%',
		                center: ['50%', '25%'],
		                label: {
		                    formatter: '{b}: {@res} ({d}%)'
		                },
		                encode: {
		                    itemName: 'product',
		                    value: 'res',
		                    tooltip: 'res'
		                }
		            }
		        ]
		    };
		
		    myChart.on('updateAxisPointer', function (event) {
		        var xAxisInfo = event.axesInfo[0];
		        if (xAxisInfo) {
		            var dimension = xAxisInfo.value + 1;
		            myChart.setOption({
		                series: {
		                    id: 'pie',
		                    label: {
		                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
		                    },
		                    encode: {
		                        value: dimension,
		                        tooltip: dimension
		                    }
		                }
		            });
		        }
		    });
		
		    myChart.setOption(option);
		
		});;
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}	
</script>
</html>