highchar的x轴数据自动生成

highchars的x轴是可以根据数据自动生成的,不过数据类型就和以前不一样了
管网详细的例子:http://www.hcharts.cn/test/index.php?from=demo&p=16


其中x轴可以自定义格式
xAxis: {
    type: 'datetime',
    labels: {  
        formatter: function() {
        	//自定义显示格式
        	return (new Date(this.value)).Format("yyyy-MM-dd"); 
        }  
    }
},




最后选中的点的显示
tooltip: {
	enabled: true,
	formatter: function() {
		return '<b>'+ this.series.name +'</b><br/>'+(new Date(this.x)).Format("yyyy-MM-dd") +': '+ this.y +'';
	}
},




这是date加上Format的方法
Date.prototype.Format = function (fmt) { //author: meizz 
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}


转载于:https://www.cnblogs.com/marx-luo/p/6713083.html

在Vue项目中使用Echarts,可以通过以下步骤自动生成X数据: 1. 在Vue组件中,引入Echarts的库文件。可以通过CDN引入,或者使用npm安装echarts并引入。 2. 在Vue组件的data中定义一个数组,用来存储自动生成的X数据。 3. 在mounted或者created钩子函数中,使用循环或者其他方式生成X数据,并将生成的数据存储到之前定义的数组中。 4. 在Echarts的配置项中,使用刚才生成的X数据。 以下是一个示例代码: ```javascript <template> <div id="chart"></div> </template> <script> import echarts from 'echarts'; export default { data() { return { xAxisData: [] }; }, mounted() { this.generateXAxisData(); this.renderChart(); }, methods: { generateXAxisData() { // 生成X数据,可以根据需求自定义逻辑 for (let i = 1; i <= 10; i++) { this.xAxisData.push(`Category ${i}`); } }, renderChart() { const chart = echarts.init(document.getElementById('chart')); const option = { xAxis: { type: 'category', data: this.xAxisData }, // 其他配置项 }; chart.setOption(option); } } }; </script> <style> #chart { width: 100%; height: 300px; } </style> ``` 在上述示例代码中,我们在mounted钩子函数中先调用generateXAxisData方法生成X数据,然后在renderChart方法中使用这些数据来配置Echarts的xAxis项。最后,通过chart.setOption方法将配置项应用到图表中。 这样,在Vue项目中使用Echarts时,X数据就能够自动生成了。你可以根据实际需求修改generateXAxisData方法来生成符合你项目需求的X数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值